Usage
Badges are used to inform of the status of an element or an action that has been taken.
Best practices
Do
Use badges to show the status of an interface element. Ensure the label clearly implies the sentiment, so color is not the only status indicator.
Don't
Do not use badges to portray actions, use buttons instead.
Do
Place the badge close to the element that is related to it.
Don't
Do not use alternative color codes to the types provided.
Do
Use the inverted version of the badge to highlight it or draw attention to crucial statuses in the interface.
Don't
Do not mix inverted and non-inverted badges when used to portray statuses in the same context.
Don't
Do not be wordy. Use a simpler and scannable term instead. For example: “New”.
Examples
Live Preview
Props
| Name | Description | Type | Default | Values |
|---|---|---|---|---|
type | string | neutral | neutral | neutral-inverted | info | info-inverted | success | success-inverted | warning | warning-inverted | danger | danger-inverted |
Slots
| Name | Description |
|---|---|
default | Default content slot |