General
Badge
A compact label for status, category, or metadata. Semantic colour variants, sized to sit inline with text.
Variants
Default
Secondary
Destructive
Outline
Success
Warning
Error
Info
Sizes
Only the padding changes. The type stays at 11px and the pill stays round, so a small badge still reads as the same object as a large one. Reach for xs when the badge annotates a line of text — a name with a role after it, a row with a count — and the default when it labels a block.
Default
Extra small
Import
import { Badge } from "@mikenotthepope/substrateui"In Context
Deployment v2.4.1
Live
Deployed to production 3 minutes ago.
Deployment v2.4.0
Rolling back
Rollback initiated due to elevated error rate.
Accessibility
Don't rely on color alone to communicate status. Badge variants have distinct colors, but users with color vision deficiency or monochrome displays will not distinguish them. Pair status badges with an icon or explicit text so the meaning is carried by more than hue.
Active
Pending
Failed
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" | "xs" | "default" | How tightly it is padded. `xs` is the tag that rides beside a line of text rather than labelling a block. |
variant | "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "error" | "info" | "default" | The visual style of the badge. Each variant uses a distinct color scheme suited to its semantic meaning. |
className | string | — | Additional CSS classes to apply to the badge element. |