import { Badge } from '@uhg-abyss/mobile';() => { return <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
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | React.ReactNode | undefined | - | - | The content of the badge. |
icon | React.ReactNode | undefined | - | - | The icon to display in the badge. |
outline | boolean | undefined | false | - | If true, the badge will have an outline. |
variant | 'success' | 'warning' | 'error' | 'info' | 'neutral' | undefined | 'success' | - | The variant 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 |