Badge

<View gap={3} direction="row" align="center">
  <Badge color="critical">23</Badge>
  <Badge.Container>
    <Badge color="critical">
      23
    </Badge>
    
    <View backgroundColor="neutral-faded" height={10} />
  </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="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>

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.

<View gap={3} direction="row">
  <Badge size="small" color="critical" rounded>
    24
  </Badge>
  <Badge size="small" color="primary" rounded>
    5
  </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 color="critical" rounded />
  <Badge size="small" color="primary" rounded />
</View>

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>
  );
}