Badges are available in bold or subtle variants.
They are commonly used to accompany headings or within tables to communicate status.
Anatomy
Anatomy summary lists and describes all the elements that exist within a component (including other components nested within).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Icon |
System Icon used to visually reinforce the information communicated by the label. |
Yes |
|
2. Numeric count |
Numeric count of associated objects. |
Yes |
|
3. Label |
Textual label providing the status or metadata about an object. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| size Variant | xSmall | small | medium | medium |
| type Variant | bold | subtle | bold |
| state Variant | neutral | inverseNeutral | info | success | warning | danger | feature | upsell | neutral |
| hasIcon Boolean | true | false | true |
| hasLabel Boolean | true | false | true |
| hasCount Boolean | true | false | true |
| ↳ ✏️ label Text | string | label |
| ↳ ✏️ count Text | string | # |
| icon InstanceSwap |
Behaviour
The Badge component can optionally indicate updates when its content changes.
In code, you can enable the statusAnimation prop to trigger an animation whenever the badge’s label or count updates. This animation helps communicate that a change has occurred. It will not trigger on initial load, only when the label or count changes.
When triggered, the badge performs a subtle pulse accompanied by a brief color change, drawing attention to the update while maintaining overall interface consistency.
The following shows what the badge animation looks like when triggered.
Accessibility considerations
In adherence to our Motion guidelines if a user has prefers-reduced-motion enabled the animation will be disabled.
Component dependencies
This component is internally dependent on the following components:
Related components
Counter Badge
Used to add a count to an associated item.
Status Badge
Used to show the health status of an entity (Deployment Targets and Workers).
Help and support