Badge

Badges show compact status markers or small counts. Use the small variant for a simple dot and the large variant for numeric labels.

8

Anatomy

Highlight

Element	Part	Selector
<span>	root	[data-scope="badge"][data-part="root"] left_clickLMBCopy
<span>	labelconditional	[data-scope="badge"][data-part="label"] left_clickLMBCopy

Props

Name	Description	Default	Control
variantOptional	Visual size of the badge. smalllarge	"small"	smallchecklarge
contentOptional	Content rendered inside large badges. string | number | undefined	undefined	-
maxOptional	Maximum number shown before using a "+" suffix. number | undefined	999
hiddenOptional	Whether to hide the badge. boolean | undefined	false
ariaLabelOptional	Accessible label. Defaults to the resolved content for large badges. string | undefined	undefined

Events0

No events documented.

Slots1

Name	Parameters	Description
default	-	Optional label content for large badges.

Styling7

Preview

Token	Description
--md-badge-container-shapeShape Fallbackvar(--md-badge-shape,var(--md-sys-shape-corner-full))	Controls container shape.
--md-badge-container-sizeLayout Fallbackvar(--md-badge-size,--dp(6))	Controls container size.
--md-badge-large-label-inline-paddingLayout Fallback--dp(4)	Controls large label inline padding.
--md-badge-large-shapeShape Fallbackvar(--md-sys-shape-corner-full)	Controls large shape.
--md-badge-large-sizeLayout Fallback--dp(16)	Controls large size.
--md-badge-shapeShape Fallbackvar(--md-sys-shape-corner-full)	Controls shape.
--md-badge-sizeLayout Fallback--dp(6)	Controls size.

Examples

Default

8

Variants

3

Max Overflow

99+