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 not rendering any complex content inside the Badge and only composing it with other components.

<Badge>Status</Badge>

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

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

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

<Badge color="critical" rounded>
  286
</Badge>

By default, Badge uses a medium size. Depending on the context and the size of the components it's used together with – you can pick a small or a large size. For instance, if it's used inside the Tabs button or as a notification bubble.

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

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.

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

If you want to use a badge for navigation or user interaction, you can pass onClick or href to it, same as in other interactive components.

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

When using Bagde for displaying a selection state, you can pass onDismiss together with dismissAriaLabel to render a dismiss icon.

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

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.

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

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

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.

function Example() {
  const [hidden, setHidden] = React.useState(false);

  return (
    <View gap={3} direction="row">
      <Button onClick={() => setHidden((state) => !state)}>Toggle</Button>
      <Badge.Container>
        <Badge size="small" color="primary" rounded hidden={hidden}>
          5
        </Badge>
        <Avatar initials="A" squared color="neutral" />
      </Badge.Container>
    </View>
  );
}