Badge
A count or status dot over an avatar, button, or icon.
Usage
import { Avatar, Badge, Button } from '@fwenthehunter/friendly-ui';
<Badge content={3} label="3 unread notifications">
<Button variant="secondary" aria-label="Notifications, 3 unread">Notifications</Button>
</Badge>
<Badge dot label="Online" position="bottom-right">
<Avatar alt="Ada Lovelace" />
</Badge>Wrap an avatar or control in Badge. The marker is positioned over its corner and does not intercept pointer events. A numeric count above max displays as max+ while its accessible name retains the full count.
Zero counts are hidden by default; set showZero to display them. With no content, the marker is hidden unless dot is enabled. Set label to explain the indicator, such as “3 unread notifications” or “Online”. An unlabeled dot is decorative.
A marker on a button sits outside the button’s accessible name. Include the count or status in the button’s aria-label when the control needs that information. Badge is not a live region; announce dynamic updates separately when necessary.
The former pill-shaped Badge is now Chip. Customize the marker with --fui-badge-background and --fui-badge-foreground.
Props
Components accept native HTML props, className, and style. Server-compatible primitives also forward React 19 refs; Modal manages its own dialog ref.
| Prop | Type | Default |
|---|---|---|
content | number | string | — |
dot | boolean | false |
position | top-right | top-left | bottom-right | bottom-left | top-right |
max | number | 99 |
showZero | boolean | false |
label | string, accessible marker description | — |