Badge
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
BETA
Variants#
Loading…
With Dots#
Loading…
Sizes#
Loading…
Custom color#
Pass any CSS color via the color prop for one-off overrides outside the semantic variants. When set, color takes precedence over variant at runtime. Invalid colors fall back to the default variant; in dev, a console.warn names the offending value.
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| dot | boolean | undefined | — | Show a colored leading dot. |
| icon | ReactNode | — | Optional leading icon (defers to children). |
| color | string | undefined | — | Arbitrary CSS color override. When set, replaces the `variant` tint. |
| size | "sm" | "md" | "lg" | null | undefined | md | |
| variant | "ok" | "warn" | "err" | "neutral" | "accent" | "purple" | "pink" | "outline" | "solid" | null | undefined | neutral |