A badge that wraps content and displays a notification

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>

Value

Whilst you would normally want to display a number, the value prop also supports strings. Here are some usage examples:

<>
<NotificationBadge value={88}>
<ActionIcon appearance="outline" size="lg">
<Icon is={Controls} />
</ActionIcon>
</NotificationBadge>
<NotificationBadge value="hi">
<Button theme="warning">I'm a button!</Button>
</NotificationBadge>
</>

API Reference

PropTypeDefaultRequired
cssCSSProperties

-

-

value
string | number

-