Badge
Compact status and count labels.
Usage
Import and drop in. No setup required — styles ship with the package.
New
Variants
Three visual styles via the variant prop: subtle (default), solid, and outline.
Subtle Solid Outline
Colors
Semantic tones, all driven by --sve-* tokens.
Primary Secondary Success Warning Danger Default
Sizes
Three sizes from the size prop.
Small Medium Large
Props
Plus every native <span> attribute via prop spreading.
| Prop | Type | Default |
|---|---|---|
variant | 'subtle' | 'solid' | 'outline' | 'subtle' |
color | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default' | 'default' |
size | 'sm' | 'md' | 'lg' | 'md' |
class Extra classes merged onto the root. | string | — |
children Badge label content. | Snippet | — |