Badge
Badge is an alphanumeric annotation. It appears either inline or in the top-right corner of an element.
Also known as: Tag, Label, Chip
| Salt package | @salt-ds/core |
|---|---|
| Available since | 1.12.0 |
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
If a numeric annotation exceeds the max value passed as a prop, there will be a plus (+) after the max value stated. If you don't pass a max value to the component, it will truncate the value after three digits displaying 999+ for any values over 999.
We recommend that you avoid using a badge with more than four to six characters. If needed, truncate strings exceeding this count with an ellipsis (…).
- To communicate a non-interactive, system-driven change to the underlying component it anchors to, such as in tabs, pages and containers.
- Typically, if you use a badge to indicate an unread notification, you'd hide the badge once the user addresses the notification. However, badges can remain persistent depending on the context.
- To trigger an immediate action, or enable an action that may change depending on context. Instead, use
Pill. - To communicate status through color, such as red/amber/green statuses. Instead, use
Pill. Badges are independent of user action, so avoid using them to communicate something the user can directly influence through a task. - To communicate read-only metadata that categorizes or groups content use
Tag.
To import Badge from the core Salt package, use: