Badge
Badges are used to inform users of the status of an object or of an action that’s been taken. Commonly used in tabular data to indicate status.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
type | type | The type of badge. Determines the background color of the badge. | 'warning' | 'success' | 'danger' | 'highlight' | 'info' | 'neutral' | 'progress' | undefined | "neutral" |
variant | variant | The style variant of the badge. Determines the background color of the badge. | 'warning' | 'success' | 'danger' | 'highlight' | 'neutral' | 'info' | undefined | "neutral" |
strong | strong | Strong badges are a secondary style for badges. They provide more visual prominence and emphasize them. | boolean | false |
Slots
| Slot name | Description |
|---|---|
Default slot | The badge content. |
icon | Used to place an icon at the start of badge. |
This component has no CSS custom properties.
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use established variants and color patterns so that users can clearly identify the importance level.
- Use to show a status update on a piece of information or action.
- Use to mark something as a “draft” or “new”.
- Use when you want to highlight something that has been added recently.
- Always position badge so that it’s easy to understand what object it’s related to.
Don’t
- Don’t make badges clickable. Instead use button component’s small variant.
- Don’t use alternatives to existing badge variants.
- Don't use badges for labeling, categorizing, or organizing objects. Use the tag component instead.
Content guidelines
Badge labels should use a single word to describe the status of an object. Only use two words if you need to describe a complex state:
When writing badge labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid unnecessary words and articles in badge labels, such as “is”, “the”, “an” or “a”:
Always describe the status in the past tense:
Variants
This section describes the different component variants, their purpose, and when to use each variant.
| Name | Purpose |
|---|---|
neutral | The default style variant. |
info | Used to convey general information that isn’t critical. |
success | Used to convey success states. For example, you might want to show a badge that tells the user a payment was successful. |
highlight | Used to highlight specific items in the interface, like notifications. |
danger | Used to communicate problems that have to be resolved so that user can continue forward. Should always be used for highlighting errors. |
warning | Used to display information that needs a user’s attention attention and may require further steps. |
progress | Used to convey something that’s in progress. |
Integration
For integration guidelines, please see Web Components documentation .