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
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 |
|---|---|---|---|
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. |