Mushilu-San UI Badge
A small label or count that marks status, category or a number of new items.
Selector: mui-badge
import { Badge } from '@mushilu-san/ui/primitives';Loading example…
Overview
variant to communicate the meaning, and size to fit the surrounding text.
dot set, the badge is a small coloured marker with no text. It is hidden from assistive technology unless label is set, in which case the label is announced instead.
Examples
Status dot
label when the colour is the only signal, so screen readers can announce it.
Loading example…
Guidelines
Do
Pair the colour with text. "Active" in a success badge is clearer than green alone. Use dangeronly for states that need attention, such as a failed sync.
Don't
Do not use a badge for a long sentence. Keep the text to a word or a short number. Do not use a dot as the only indicator of an important state without a label.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | — (no role) | |
dot badge | — | aria-hidden="true" when there is no label. With a label, the host carries aria-label. |
Badges are not interactive. If a badge needs to be clicked, put it inside a button and describe the count in the button label.
API
Badge
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'default' | 'default' | Meaning of the badge: `default`, `primary`, `success`, `warning`, `danger` or `info`. |
size | 'sm' | 'md' | 'lg' | 'md' | Badge size. Default `md`. |
dot | boolean | false | Renders a small coloured dot without text. Pair with `label` so the status is announced. Accepts attribute presence, e.g. <… dot>. |
label | string | undefined | — | Accessible name for a dot badge. Ignored for text badges. |
CSS parts
::part(root)
Tokens
--mui-color-primary--mui-color-danger--mui-color-success--mui-color-warning--mui-color-info--mui-radius-full