Components
Badge
Badges show notifications, counts, or status information.
When to use
To indicate a count
Use badges to indicate a notification or number count
To indicate a count
Use badges to indicate a notification or number count
To indicate a count
Use badges to indicate a notification or number count
To show status
Use badges to show the current state of an item
To show status
Use badges to show the current state of an item
To show status
Use badges to show the current state of an item
When to avoid
Long values
Since badges are used to quickly indicate a count or a brief message, it is best to find another method if you have to support long values.
Long values
Since badges are used to quickly indicate a count or a brief message, it is best to find another method if you have to support long values.
Long values
Since badges are used to quickly indicate a count or a brief message, it is best to find another method if you have to support long values.
Specifications
Size
Default
Large
Default
Large
Default
Large
Default
Large
Content
Message
A badge with a message shows a non-interactive label used to highlight an item's status, attribute, or category.
Counter
A counter badge is a small, non-interactive visual indicator that displays a number.
Message
A badge with a message shows a non-interactive label used to highlight an item's status, attribute, or category.
Counter
A counter badge is a small, non-interactive visual indicator that displays a number.
Message
A badge with a message shows a non-interactive label used to highlight an item's status, attribute, or category.
Counter
A counter badge is a small, non-interactive visual indicator that displays a number.
Message
A badge with a message shows a non-interactive label used to highlight an item's status, attribute, or category.
Counter
A counter badge is a small, non-interactive visual indicator that displays a number.
Styles
Primary
Background
Alert
Success
Primary
Background
Alert
Success
Primary
Background
Alert
Success
Primary
Background
Alert
Success
Anatomy
1
Label
The label content can be either numerical or text. If numerical, use the padding-false prop which removes the horizontal space for a tighter, more optically balanced look around the numbers.
2
Container
Contains the numerical or text value. Offers a default and large size which alters the vertical-padding.
Value
Badge
Badge