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


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.


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


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.


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.


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.


Badge properties:

colorpositive, critical, primary-false
variantfaded, outline-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element

Badge.Container properties:

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