Components
Badge
A count or a dot on the corner of an element.
Badge puts a small count or dot on the corner of its child.
import Badge from '@hone-ui/react/Badge';Examples
M
4N
999+A
<Badge badgeContent={4} color="primary"><Avatar variant="rounded">M</Avatar></Badge>
<Badge badgeContent={1000} max={999} color="error"><Avatar variant="rounded">N</Avatar></Badge>
<Badge variant="dot" color="success" overlap="circular"><Avatar>A</Avatar></Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
badgeContent | ReactNode | The content, usually a count. | |
color | 'default', 'primary', 'secondary', 'error', 'info', 'success', 'warning', any palette key | 'default' | The fill. |
variant | 'standard', 'dot' | 'standard' | A count or a small dot. |
max | number | 99 | A larger count shows as max+. |
showZero | boolean | false | Shows the badge for 0. |
invisible | boolean | false | Hides the badge. |
overlap | 'rectangular', 'circular' | 'rectangular' | The child's shape, so the badge sits on its edge. |
anchorOrigin | { vertical, horizontal } | { vertical: 'top', horizontal: 'right' } | The corner. |
slotProps.badge | span props | Props for the badge element. | |
sx, className, style, ref, children | Standard. |
Notes
- A badge with no content hides unless it is a dot. Hidden badges scale to zero.
component,slots,componentsandcomponentsPropsare not supported.
Accessibility
Include the count in the accessible name of the control the badge sits on, such as
aria-label="4 new messages".