No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Badge
A badge is a visual decoration for UI elements. Different badges can display numerical values, status, or text.
Best Practices

Badges should not receive focus
  • Badge information should be surfaced as part of the control that it is associated with, because, badges themselves do not receive focus meaning they are not directly accessible by screen readers.
If the combination of icon and badge communicates some meaningful information, that information should be surfaced in another way through screenreader or tooltip on the component the badge is associated with.
Screen Readers
  • Badges should be given a meaningful description. This description will be applied, via “aria-describedby” to the element decorated by the Badge. For example, "Chat, 6 unread" or similar.
General guidance is that the badge icon is marked as “aria-hidden” by default.
Badge shouldn't rely only on color information
  • Include meaningful descriptions when using color to represent meaning in a badge. If relying on color only [unread dot] ensure that non-visual information is included using aria-describedby
Text on Badge
  • Badges are intented to have short text, small numerical values or status information. Long text is not supported and should not be used within a Badge.
Default
Open in CodeSandbox
NameDescriptionDefaultControl 
icon
ShorthandProps<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
-
ref
((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null
--
as
"div"
-
appearance
A Badge can be filled, outline, ghost, inverted
"filled""ghost""outline""tint"
-
color
A Badge can be one of preset colors
"brand""danger""important""informative""severe""subtle""success""warning"
-
iconPosition
A Badge can position the icon before or after the content.
"before""after"
-
shape
A Badge can be square, circular or rounded.
"circular""square""rounded"
-
size
A Badge can be on of several preset sizes.
"small""medium""large""extra-large""tiny""extra-small"
-
Stories
Appearance
A badge can have a ghost, filled, outline, or tint appearance. The default is filled.
Open in CodeSandbox
Sizes
A badge supports tiny, extra-small, small, medium, large, and extra-large sizes. The default is medium.
Open in CodeSandbox
Shapes
A badge can have square, rounded or circular shape. The default is circular.
Open in CodeSandbox
Color
A badge can have different colors. The available colors are brand, danger, important, informative, severe, severe, success or warning. The default is brand.
Open in CodeSandbox
Icon
A badge can display an icon.
Open in CodeSandbox