Feedback & indicatorsBadge

Badge

Use badges to highlight an item's status for quick recognition.

Prop	Type	Required	Default	Description
`label`	`string`	Yes	—	The label of the badge.
`size`	`BadgeSize` `xsmall`\|`small`\|`medium`	—	`medium`	The size of the badge.
`tone`	`BadgeToneColors` `primary`\|`primary-inverse`\|`secondary`\|`secondary-inverse`\|`neutral`\|`neutral-inverse`\|`critical`\|`critical-inverse`\|`positive`\|`cautious`\|`informative`\|`disabled`	—	`neutral`	The tone of the badge.
`weight`	`WeightType` `bold`\|`subtle`\|`text`	—	`subtle`	The visual "weight" of the badge.
Also accepts `DisallowStyleProps`, `ValidBoxProps`

Prop	Type	Required	Default	Description
`'aria-label'`	`string`	—	—	When the intent isn't provided by text, you must supply an "aria-label" for assistive tech users.
`size`	`xsmall`\|`small`\|`medium`	—	`medium`	—
`tone`	`IndicatorToneColors` `primary`\|`neutral`\|`critical`\|`positive`\|`cautious`\|`informative`\|`disabled`	Yes	—	—
Also accepts `DisallowStyleProps`

Prop	Type	Required	Default	Description
`max`	`number`	—	—	Optional cap value for the badge. When the `value` is greater than the `max` prop, a "+" will automatically be appended.
`tone`	`BadgeToneColors` `primary`\|`primary-inverse`\|`secondary`\|`secondary-inverse`\|`neutral`\|`neutral-inverse`\|`critical`\|`critical-inverse`\|`positive`\|`cautious`\|`informative`\|`disabled`	—	—	The tone of the badge.
`value`	`number`	Yes	—	The number displayed inside the badge.
Also accepts `DisallowStyleProps`, `ValidBoxProps`

Badge — Guidelines

When to use Badge over similar components, and how to choose tone and weight.

Icon

Use icons to help users more easily understand common interaction patterns that are available.