import { Badge } from '@uhg-abyss/web/ui/Badge';() => { 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
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 | A11y | Description |
|---|---|---|---|---|
ariaText | string | undefined | If present, this value will be added as hidden text for screen readers | ||
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | The content of the Badge | ||
className | string | undefined | CSS class name to apply to each element within the component | ||
css | CSSProperties | Partial<Record<"abyss-badge-root" | "abyss-badge-content" | "abyss-badge-icon", CSSProperties>> | undefined | Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information | ||
data-testid | string | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | ||
disableDefaultProviderProps | boolean | undefined | 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. | |
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | ||
icon | "function" | "filter" | "cancel" | "close" | "save" | "search" | "article" | "code" | "details" | "html" | "iframe" | "input" | "label" | "link" | "map" | "menu" | "output" | "script" | ... 3568 more ... | undefined | The IconSymbol to insert at the start of the Badge | ||
outline | boolean | undefined | false | If true, the Badge will be outlined | |
slotProps | Partial<Record<ToSlotKey<{ root: LeafSlotDef<"span", undefined>; icon: LeafSlotDef<"span", undefined>; content: LeafSlotDef<"span", undefined>; }, "badge">, SlotPropsLeafValue>> | undefined | Props to pass to individual internal slots of the Badge component. See slotProps for more information | ||
variant | "error" | "info" | "warning" | "success" | "neutral" | undefined | 'success' | The color variant of the Badge | |
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Badge Classes
| Class Name | Description |
|---|---|
| .abyss-badge-content | Badge content element |
| .abyss-badge-icon | Badge icon element |
| .abyss-badge-root | Badge root 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
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 |