Notification Badge

The NotificationBadge component is a lightweight wrapper for content such as ActionIcons, but can be wrapped around any block-level element.

It displays a badge in top right of the content it is wrapping, which displays a value passed in as a prop. This could be, for example, the number of filters selected on a select filters badge.

<NotificationBadge value={3}>
  <ActionIcon appearance="outline" size="lg" isRounded>
    <Icon is={Controls} />
  </ActionIcon>
</NotificationBadge>

Setting custom value, icon, theme and emphasis

Whilst you would normally want to display a number, the value prop also supports strings. Additionally, you can also provide a custom icon, theme and emphasis. Here are some usage examples:

<div className="flex gap-3">
  <NotificationBadge value={3} icon={Danger} theme="danger" emphasis="bold">
    <ActionIcon appearance="outline" size="lg">
      <Icon is={Controls} />
    </ActionIcon>
  </NotificationBadge>
  <NotificationBadge value="hi">
    <Button theme="warning">I'm a button!</Button>
  </NotificationBadge>
</div>

API Reference