import { Badge } from '@uhg-abyss/mobile';<Badge>Badge Sandbox</Badge>Variants
Use the variant property to set the color of the Badge.
The options are success, warning, error, info, and neutral. The default is success.
Outline
Use the outline property to turn on the outline of the Badge. The default is false.
Icons
Use the icon property to set the icon of the Badge.
Badge Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The text to be input into the Badge component |
| icon | node | - | Adds an icon to the Badge component |
| outline | boolean | false | Add an outline to the badge. |
| variant | "success" | "warning" | "error" | "info" | "neutral" | success | Set the color of the badge |
Badge Classes
| Class Name | Description |
|---|---|
| abyss-badge-root | Badge root element |
| abyss-badge-text | Badge text element |
Badge Tokens
| Token Name | Value | |
|---|---|---|
| badge.color.surface.container.success | #F0F9ED | |
| badge.color.surface.container.warning | #FFFBEB | |
| badge.color.surface.container.error | #FCF0F0 | |
| badge.color.surface.container.info | #EDF3FB | |
| badge.color.surface.container.neutral | #F3F3F3 | |
| badge.color.icon.success | #007000 | |
| badge.color.icon.warning | #C24E14 | |
| badge.color.icon.error | #990000 | |
| badge.color.icon.info | #196ECF | |
| badge.color.icon.neutral | #4B4D4F | |
| badge.color.text.label.success | #007000 | |
| badge.color.text.label.warning | #C24E14 | |
| badge.color.text.label.error | #990000 | |
| badge.color.text.label.info | #196ECF | |
| badge.color.text.label.neutral | #4B4D4F | |
| badge.color.border.container.success | #BFDBBF | |
| badge.color.border.container.warning | #F3D8C0 | |
| badge.color.border.container.error | #E8C0C0 | |
| badge.color.border.container.info | #C3D8F2 | |
| badge.color.border.container.neutral | #CBCCCD | |
| badge.border-radius.container | 4 | |
| badge.border-width.all.container | 1 | |
| badge.sizing.all.icon | 16 | |
| badge.spacing.gap.horizontal.container | 4 | |
| badge.spacing.padding.vertical.container | 2 | |
| badge.spacing.padding.horizontal.container | 8 |
Badge Classes
| V2 | V1 | Status |
|---|---|---|
| badge-root | badge-root | Unchanged |
| badge-text | badge-text | Unchanged |
Badge Props
| V2 | V1 | Status |
|---|---|---|
| children | children | Unchanged |
| icon | icon | Modified |
| outline | outline | Unchanged |
| - | rounded | Removed |
| variant | variant | Unchanged |