Badge

A badge is used to annotate other information like a label or an object name.

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
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.