Badge
Status label. Light for tables and lists, Solid for emphasis. Optional dot, icon or close.
Variants: 30
| Property | Type / options |
|---|---|
| Label | text |
| Dot | boolean (off) |
| Leading icon | boolean (off) |
| Leading icon swap | instance swap (icon) |
| Close | boolean (off) |
| Size | sm · md · lg |
| Style | Light · Solid |
| Color | Gray · Brand · Error · Warning · Success |
Do
- Use colour to signal status: Success, Warning, Error.
- Keep labels to one or two words.
- Use Tag (not Badge) for removable values.
Don’t
- Don’t use badges as buttons.
- Don’t rely on colour alone.
- Don’t place more than three badges together.
Removable filter / selection chip.
Variants: 3
| Property | Type / options |
|---|---|
| Label | text |
| Leading icon | boolean (off) |
| Leading icon swap | instance swap (icon) |
| Close | boolean (on) |
| Size | sm · md · lg |