Badge
A 22px pill that labels status or shows a count. Badges are read-only — they never take focus or respond to clicks.
Active
<Badge tone="success" dot>Active</Badge>Import
import { Badge } from "@merid/react";Examples
Tones
Each tone is a soft tint with strong text. solid is the only filled tone — reserve it for the one badge that must stand out.
NeutralAccentSuccessWarningDangerSolid
<Badge>Neutral</Badge>
<Badge tone="accent">Accent</Badge>
<Badge tone="success">Success</Badge>
<Badge tone="warning">Warning</Badge>
<Badge tone="danger">Danger</Badge>
<Badge tone="solid">Solid</Badge>Status dot
dot adds a small leading dot in the current text colour, which reads well for live states.
OnlineDegradedDown
<Badge tone="success" dot>Online</Badge>
<Badge tone="warning" dot>Degraded</Badge>
<Badge tone="danger" dot>Down</Badge>Count
Numbers inside badges use tabular numerals, so counts don't shift width as they change.
12
<Badge tone="accent">12</Badge>API reference
Forwards its ref to the <span> and passes native span attributes through.
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "neutral" | "accent" | "success" | "warning" | "danger" | "solid" | "neutral" | Colour tone. solid is the only filled tone. |
dot | boolean | false | Shows a small leading status dot in the current text colour. |
Styling
| Hook | Values |
|---|---|
.mrd-badge | Root <span> |
.mrd-badge__dot | Leading status dot (aria-hidden) |
data-tone | neutral · accent · success · warning · danger · solid |
Badge has no component variables; tones map to the --mrd-*-soft and --mrd-*-strong colour tokens.
Accessibility
- A badge is plain text; its content is read in document order. Make sure it makes sense next to what it labels.
- The dot is decorative. Never rely on the dot's colour alone — the text must say the status.
- A bare number (“12”) needs context. Add a visually hidden suffix if the meaning isn't clear from nearby text, e.g.
12 <VisuallyHidden>unread</VisuallyHidden>.
Guidelines
Do
Keep badge text to one or two words: “Draft”, “Past due”.
Avoid
Use a badge as a button or filter chip — it is not interactive and cannot receive focus.
Related
- Alert — for status that needs a sentence.
- VisuallyHidden — to give counts an accessible meaning.