BadgeProps

Represents the props of the KendoReact Badge component.

align?

Specifies the alignment of the Badge.

The possible keys are:

• horizontal— Defines the possible horizontal alignment of the Badge.
  • start—Uses the start point of the parent element.
  • end(Default)—Uses the end point of the parent element.
• vertical— Defines the possible vertical alignment of the Badge.
  • top(Default)—Uses the top point of the parent element.
  • bottom—Uses the bottom point of the parent element.

children?

The React elements that will be rendered inside the Badge.

className?

Specifies a list of CSS classes that will be added to the Badge.

cutoutBorder?

Specifies wether or not to render additional "cutout" border around the Badge.

The possible values are:

• true
• false (Default)

dir?

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

fill?

Specifies the appearance fill style of the Badge.

The possible values are:

• solid (Default)
• outline

position?

Specifies the position of the Badge relative to the edge of the container element.

The possible values are:

• edge (Default)—The center of the Badge is positioned on the edge of the container element.
• outside—The Badge is entirely positioned outside the edge of the container element.
• inside—The Badge is entirely positioned inside the edge of the the container element.

shape?

Specifies the shape of the Badge.

The possible values are:

• circle (Default)—Applies circular shape on the Badge.
• rectangle—Applies no border radius on the Badge.
• rounded—Applies default border radius on the Badge.
• dot—Applies dot shape on the Badge.
• pill—Applies border radius equal to half of the height of the Badge.

size?

Specifies the size of the Badge.

The possible values are:

• small
• medium (Default)
• large

style?

Sets additional CSS styles to the Badge.

themeColor?

Specifies the theme color of the Badge.

The possible values are:

• primary (Default)—Applies coloring based on primary theme color.
• secondary—Applies coloring based on secondary theme color.
• tertiary— Applies coloring based on tertiary theme color.
• inherit— Applies inherited coloring value.
• info—Applies coloring based on info theme color.
• success— Applies coloring based on success theme color.
• warning— Applies coloring based on warning theme color.
• error— Applies coloring based on error theme color.
• dark— Applies coloring based on dark theme color.
• light— Applies coloring based on light theme color.
• inverse— Applies coloring based on inverse theme color.