Badge

<View gap={4} direction="row" align="center">
  <Badge color="critical" size="small">23</Badge>
  <Badge.Container>
    <Badge color="critical" size="small">
      23
    </Badge>
    
    <View width={10} height={10} backgroundColor="neutral-faded" />
  </Badge.Container>
</View>

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.

<Badge>Status</Badge>

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

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

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

<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>

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

<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.

<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 />
  <Badge size="large" color="neutral" rounded />
</View>

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

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

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.

<View gap={3} direction="row">
  <Badge onClick={() => {}}>Status</Badge>
</View>

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.

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

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 Example() {
  const [hidden, setHidden] = React.useState(false);

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