BadgeComponent

Updated on Feb 6, 2026

Represents the Kendo UI Badge component for Angular. Displays additional information or status related to an element, such as notifications or counts.

Provides configuration options for alignment, size, fill, theme color, roundness, position, and cutout border.

html

<kendo-badge size="large" themeColor="success">99+</kendo-badge>

Selector

kendo-badge

Inputs

Name	Type	Default	Description
align	BadgeAlign	"{ vertical: 'top', horizontal: 'end' }"	Specifies the alignment of the Badge (see example).
cutoutBorder	boolean	false	Specifies whether to render additional cutout border around the Badge ([see example]https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#cutout-border)).
fill	BadgeFill		Specifies the appearance fill style of the Badge (see example). The default value is set by the Kendo theme.
position	BadgePosition	edge	Specifies the position of the Badge relative to the edge of the parent container element (see example).
rounded	BadgeRounded		Specifies the roundness of the Badge ([see example]https://www.telerik.com/kendo-angular-ui/components/indicators/badge/appearance#rounded)). The default value is set by the Kendo theme.
size	BadgeSize		Specifies the size of the Badge (see example). The default value is set by the Kendo theme.
themeColor	BadgeThemeColor		Specifies the theme color of the Badge. The theme color applies as background and border color, while also amending the text color accordingly (see example). The default value is set by the Kendo theme.