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.

Counter 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 
count
Value displayed by the Badge
number
0
ref
((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null
--
icon
ShorthandProps<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
-
as
"div"
-
size
A Badge can be on of several preset sizes.
"small""medium""large""extra-large""tiny""extra-small"
-
iconPosition
A Badge can position the icon before or after the content.
"before""after"
-
overflowCount
Max number to be displayed
number
99
showZero
If the badge should be shown when count is 0
boolean
false
dot
If a dot should be displayed without the count
boolean
false
shape
A Badge can be circular or rounded
"circular""rounded"
"circular"
appearance
A Badge can be filled, ghost
"filled""ghost"
"filled"
color
Semantic colors for a counter badge
"brand""danger""important""informative"
"brand"
Stories
Appearance
A counter badge can have a ghost or filled appearance. The default is filled.
Open in CodeSandbox
Shapes
A counter badge can have a rounded or circular shape. The default is circular.
Open in CodeSandbox
Sizes
A counter badge supports tiny, extra-small, small, medium, large, and extra-large sizes. The default is medium.
Open in CodeSandbox
Color
A counter badge can be different colors. The available colors are brand, danger, important, informative, severe, severe, success or warning. The default is brand.
Open in CodeSandbox
Dot
A counter badge can display a small dot.
Open in CodeSandbox