Badge
Small status label in six variants, including our success and warning extensions.
Badge renders a compact status label. Beyond shadcn's four variants it
includes success and warning (srui's extension to the token set).
Installation
import { Badge } from "@iammikz/srui";
Usage
Default
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | "success" | "warning" | "default" | Color treatment |
| ...props | React.ComponentProps<"span"> | — | Native span attributes |
Examples
All variants
DefaultSecondaryDestructiveOutlineSuccessWarning
As a counter
Accessibility
Badges are plain text — readable by default. Don't rely on the variant color alone to convey meaning; put the meaning in the text ("Success", "Deprecated") as these examples do.