Design Tokens

Utilities

Accordion

Actionable

Container

Hooks

useResponsiveClientValue

Badge

Compact element that represents the status of an object or user input.

Import

import { Badge } from "reshaped";
import type { BadgeProps } from "reshaped";

Storybook

Badge stories

Usage

Badge renders its children as its text content. We recommend to not render any complex content layout inside the Badge and only combine the badge with other components.

Status

<Badge>Status</Badge>

Make Badge look like a notification bubbl with the rounded property.

99+

<Badge color="critical" size="small" rounded>
  99+
</Badge>

Colors

Badge comes in multiple colors to communicate an object's status.

Neutral

Positive

Warning

Critical

Primary

<View gap={3} direction="row">
  <Badge>Neutral</Badge>
  <Badge color="positive">Positive</Badge>
  <Badge color="warning">Warning</Badge>
  <Badge color="critical">Critical</Badge>
  <Badge color="primary">Primary</Badge>
</View>

Variants

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

Positive faded

Positive outline

<View gap={3} direction="row">
  <Badge color="positive" variant="faded">
    Positive faded
  </Badge>
  <Badge color="positive" variant="outline">
    Positive outline
  </Badge>
</View>

By default, Badge uses a medium size. Depending on the context and the size of the components it is used with, you can choose a small or large size. For instance, use the small size when rendered inside the Tabs buttons.

Status

New version

<View gap={3} direction="row">
  <Badge size="small" color="critical" rounded>
    24
  </Badge>
  <Badge size="medium" color="primary">
    Status
  </Badge>
  <Badge size="large">New version</Badge>
</View>

To show an empty notification bubble, use Badge without the children property.

<View gap={3} direction="row">
  <Badge size="small" color="primary" rounded />
  <Badge color="critical" rounded />
</View>

Icons

Badge can display icons on either side of it using icon and endIcon properties.

Your favorite pick

Check our new release

<View gap={3} direction="row">
  <Badge icon={HeartIcon}>Your favorite pick</Badge>
  <Badge endIcon={ChevronRightIcon}>Check our new release</Badge>
</View>

Interactions

Pass an onClick or href property to use Badge for interaction or navigation. It automatically resolves the correct HTML tag and integrates with the routing libraries.

<Badge onClick={() => {}}>Status</Badge>

When using Badge to display a selection state, pass onDismiss together with dismissAriaLabel to render a dismiss icon. dismissAriaLabel is required in this case to keep the dimiss button accessible.

Ice-cream

<TextField
  name="food"
  startSlot={
    <Badge
      onDismiss={() => {}}
      dismissAriaLabel="Remove ice-cream from selection"
    >
      Ice-cream
    </Badge>
  }
  placeholder="Placeholder"
/>

Composition

To display a Badge in the corner of another element, use the Badge.Container compound component. This is useful for notification bubbles, avatar statuses, and similar cases. It supports top-end and bottom-end positions.

<View direction="row" gap={6}>
  <Badge.Container>
    <Badge color="critical" size="small" rounded>
      5
    </Badge>
    <Avatar initials="A" squared color="neutral" />
  </Badge.Container>

  <Badge.Container position="bottom-end">
    <Badge color="critical" size="small" rounded>
      23
    </Badge>
    <Avatar initials="A" squared color="neutral" />
  </Badge.Container>
</View>

If your wrapped element has a circular shape, the Badge won't cover the element's visible area by default. You can move the Badge closer to the container center by using the overlap flag.

<Badge.Container overlap>
  <Badge size="small" color="primary" rounded>
    5
  </Badge>
  <Avatar initials="A" color="neutral" />
</Badge.Container>

You can control the Badge visibility with the hidden property when the Badge is no longer relevant to the user.

function Component() {
  const hiddenToggle = useToggle();

  return (
    <View gap={4} direction="row">
      <Badge.Container>
        <Badge color="critical" rounded hidden={hiddenToggle.active}>
          5
        </Badge>
        <Avatar initials="A" squared color="neutral" />
      </Badge.Container>
      <Button onClick={hiddenToggle.toggle}>
        Mark as {hiddenToggle.active ? "unread" : "read"}
      </Button>
    </View>
  );

Avatar

Breadcrumbs