Badge
Badges are compact elements that represent the status of an object or user input.

Usage

Colors

Badges can be used to communicate different statuses or attributes of an object and therefore come in multiple colors defined with design tokens.

Variants

Each color can be used either with its default appearance or with faded/outline variant.

If you need more differentiation from regular badges - you can use rounded version of the component.

Sizes

Other use-case for using Badge is to display numeric values, and usually want them to be compact. For instance, you can use it to show the amount of notifications. In these cases - you can use small size of the badge.

If you don't have a number to show but rather want to use it as 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.

Using with other elements

If you want to display a Badge in relation to another element, you can use Badge.Container compound component. This will help you in situations when you implement notification bubbles, avatar statuses etc.

In case your wrapped element is circular, Badge won't really cover this element visible area by default. Different positioning can be achieved in that case by using overlap flag.

When using with other elements Badges might become irrelevant over time. For instance, you might check your notification and its counter goes to zero and you might want to hide the Badge now.

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