import { Badge } from '@uhg-abyss/web/ui/Badge';<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
To insert an IconSymbol into the Badge, use the icon property. The icon prop accepts either a string (the name of the IconSymbol to use) or an object of the following type:
{ icon: string; variant: 'filled' | 'outlined';}See the IconSymbol docs for more info on the possible variants.
Width
The Badge component has a max width of 200px. Excess text will truncate.
Accessibility
Use the ariaText prop to provide additional information denoted by the color. This will be announced before visible text. For more information, visit the Accessibility tab.
Badge Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
ariaText | string | - | - | If present, this value will be added as hidden text for screen readers |
children | React.ReactNode | - | - | The content of the Badge |
className | string | - | - | CSS class name to apply to each element within the component |
css | Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>> | - | - | Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation |
data-testid | string | - | - | Suffix used to create a unique ID used for automated testing |
disableDefaultProviderProps | boolean | false | - | If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored. |
icon | "function" | "article" | "code" | "details" | "html" | "iframe" | "input" | "label" | "link" | "map" | "menu" | "output" | "search" | "script" | "select" | "style" | "table" | "title" | ... 3567 more ... | { ...; } | - | - | The IconSymbol to insert at the start of the Badge |
outline | boolean | false | - | If true, the Badge will be outlined |
variant | "error" | "info" | "warning" | "success" | "neutral" | 'success' | - | The color variant of the Badge |
Badge Classes
| Class Name | Description |
|---|---|
| .abyss-badge-root | Badge root element |
| .abyss-badge-icon | Badge icon element |
| .abyss-badge-content | Badge content element |
Badges are not focusable, visual text elements used to show a status for quick recognition. Avoid using badge for text truncated beyond 200 pixels, because it will not be accessible.
Decorative Icons
In the badge below, since there is sufficient text next to the icon, the icon is considered decorative and and does not need to be exposed to assistive technology.
Meaningful Colors
Conveying Meaning Via Color Alone: Color must not used as the only means of conveying information, actions, prompting a response, or distinguishing elements. Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class. This can also be done by using the ariaText prop.
Component Tokens
Note: Click on the token row to copy the token to your clipboard.
Badge Tokens
| Token Name | Value | |
|---|---|---|
| badge.color.border.container.error | #E8C0C0 | |
| badge.color.border.container.info | #C3D8F2 | |
| badge.color.border.container.neutral | #CBCCCD | |
| badge.color.border.container.success | #BFDBBF | |
| badge.color.border.container.warning | #F3D8C0 | |
| badge.color.icon.error | #990000 | |
| badge.color.icon.info | #126ECF | |
| badge.color.icon.neutral | #4B4D4F | |
| badge.color.icon.success | #007000 | |
| badge.color.icon.warning | #C24E14 | |
| badge.color.surface.container.error | #FCF0F0 | |
| badge.color.surface.container.info | #EEF4FF | |
| badge.color.surface.container.neutral | #F3F3F3 | |
| badge.color.surface.container.success | #F0F9ED | |
| badge.color.surface.container.warning | #FFFBEB | |
| badge.color.text.error | #990000 | |
| badge.color.text.info | #126ECF | |
| badge.color.text.neutral | #4B4D4F | |
| badge.color.text.success | #007000 | |
| badge.color.text.warning | #C24E14 | |
| badge.border-radius.all.container | 4px | |
| badge.border-width.all.container | 1px | |
| badge.sizing.icon.all | 16px | |
| badge.spacing.gap.horizontal.container | 4px | |
| badge.spacing.padding.horizontal.container | 8px | |
| badge.spacing.padding.vertical.container | 2px |