Badge

Badges are compact elements that represent the status of an object or user input.
Can be used as a notification bubble without any value
Supports positioning relatively to other components


Usage

Badge renders its children as its text content. We recommend to not render any complex content inside of it and instead combine it with other components.

Colors

Badges can be used to communicate a status or an attribute of an object. Therefore it comes in multiple colors defined with design tokens.

Variants

Each color can be used either with its default appearance or with faded, outline variants.

Badge can be used for displaying notification bubbles or other numerical values with the rounded property.

Sizes

Whenever Badge is used together with other components, it can leverage a small size to fit into the parent component. For instance, when it is used inside the Tabs button or as a notification bubble.

If you don't have a value to show but rather want to use it as an empty notification badge - you can use it without the children property.

Note: When using an empty badge - you need to provide color property as well to keep clearly visible on the screen.

Composition

If you want to display a Badge in a corner of another element, you can use Badge.Container compound component. This will help you in situations when you implement notification bubbles, avatar statuses and other similar cases.

In case your wrapped element is has a circle shape, Badge won't be covering this element visible area by default. Different positioning can be achieved in that case by using overlap flag.

When using Badge for real-time time data, like displaying unread messages count or displaying a status of a user, it might become irrelevant over time. You can control the Badge visibility for such cases with the hidden property.

Properties

Badge properties:

NameTypeDefaultRequiredComment
childrenReact.ReactNode-false
colorpositive, critical, primary-false
variantfaded, outline-false
sizesmall-false
roundedboolean-false
hiddenboolean-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element

Badge.Container properties:

NameTypeDefaultRequiredComment
childrenReact.ReactNode-false
positiontop-end, bottom-endtop-endfalse
overlapboolean-falseShould it be positioned within the element?
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element
Previous
Next