Notification Badge
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
Prop | Type | Default | Required |
---|---|---|---|
css | CSSProperties | - | - |
value | string | number | - |