Badge

Import
import { Badge } from "reshaped";
import type { BadgeProps } from "reshaped";
Storybook
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 not rendering any complex content inside the Badge and only composing it with other components.

Colors

Badges can be used to communicate an object's status or attribute, and, therefore, it comes in multiple colors.

Variants

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

Badges can display notification bubbles or other numerical values with the rounded property.

Sizes

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

If you don't have a value to show but instead 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 to keep it visible on the screen.

Composition

If you want to display a Badge in the 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.

If your wrapped element has a circle shape, Badge won't be covering this element's visible area by default. However, you can achieve different positioning by using an overlap flag.

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

Previous