Badge

A badge is an annotation that displays a numeric value.

Examples

Read

7 24 240 999+

Unread

7 Unread Messages 24 Unread Messages 240 Unread Messages 999+ Unread Messages

Disabled

7 24 240 999+

Props

Badge

*required
NameTypeDefaultDescription
childrenReact.ReactNode''content rendered inside the Badge
classNamestring''additional classes added to the Badge
isDisabledbooleanfalseAdds styling to the badge to indicate it is disabled
isReadbooleanfalseAdds styling to the badge to indicate it has been read
screenReaderTextstringText announced by screen readers to indicate the current content/status of the badge.

CSS variables

Expand or collapse columnSelectorVariableValue