Appearance
The Badge provides a set of predefined appearance options such as various border radius, sizes, theme colors, and optional cutout borders.
Since version 22.1.0, default values of the appearance properties are no longer hardcoded in the component. The default values are inherited from the Kendo theme.
For more information, refer to the Design System documentation.
The following example demonstrates all available appearance options of the Badge in action.
Theme Color
The Badge allows you to specify predefined theme colors. The theme color will be applied as a background and border color while amending the text color accordingly.
The available themeColor values are:
baseprimarysecondarytertiaryinfosuccesswarningerror
Rounded
The Badge allows you to set different border radius.
The available rounded values are:
smallmediumlargefullnone
Size
The Badge allows you to set different sizes.
The available size values are:
smallmediumlarge
Fill Mode
The Badge enables you to create solid, tint, or outline badges through the fillMode property.
The available fillMode values are:
solidtintoutline
Cutout Border
The Badge allows you to specify whether or not to render an additional cutout border around its content by using the cutoutBorder property. By default, cutoutBorder is set to false.