Back to showcase
Or
Section break
Display Components
Visual indicator components: badges, status codes, pills, tags, and dividers.
Badge
Flexible badge with multiple color variants and sizes.
default accent success warning error muted outline
size="sm": default accent success
label prop: v2.0 new beta
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'accent' | 'success' | 'warning' | 'error' | 'muted' | 'outline' | 'default' | Color variant |
| size | 'sm' | 'md' | 'md' | Badge size |
| children | Snippet? | — | Badge content (snippet) |
| label | string? | — | Badge text (alternative to children snippet) |
StatusCodeBadge
HTTP status code display with automatic color coding: 2xx green, 3xx amber, 4xx/5xx red.
200 200 OK 201 Created 301 Moved Permanently 400 Bad Request 404 Not Found 500 Internal Server Error
| Prop | Type | Description |
|---|---|---|
| code | number | HTTP status code |
| label | string? | Optional label (e.g. "OK", "Not Found") |
Pill
Pill-shaped toggle button with active state. Useful for filter controls.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Pill text |
| active | boolean | false | Active/selected state |
| onclick | () => void | — | Click handler |
Tag
Bordered tag component. Lighter and smaller than Badge, used for categorization labels.
v2024-12-01 beta stable size="md": v2024-12-01 beta
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Tag text |
| size | 'sm' | 'md' | 'sm' | Tag size |
Divider
Horizontal line separator with optional centered label. Three spacing variants.
spacing="sm"
spacing="md" (default)
spacing="lg"
with label
Or
Section break
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string? | — | Optional centered label text |
| spacing | 'sm' | 'md' | 'lg' | 'md' | Vertical spacing around divider |