01
Overview
A small inline label for status, category, or count display.
Use Badge for attached counts, statuses, and compact annotations; use Chip mode="display" when the item is an issue label or tag.
Usage
02
When to use
Use when
- Annotating a value with a short status word like "new" or "beta".
- Displaying a numeric count next to an icon or title.
- Displaying the billing state of a subscription in a dashboard, invoice list, or account settings page.
- Annotating a plan name, customer row, or invoice line with its current payment lifecycle state.
Avoid when
- The label must be interactive or removable — use chip instead.
- Showing only a colored dot for presence — use status-dot instead.
03
Examples
Badge sizes
Extra small, small, and medium sizes.
Badge variants
All five semantic variant styles.
04
Props
| Name | Type | Default | Required | Bindable | Description |
|---|---|---|---|---|---|
variant | 'neutral''success''warning''danger''info''accent' | 'neutral' | |||
size | 'xs' | 'sm' | 'md' | 'md' | |||
monochrome | boolean | false | Render the badge label in a monospace font. | ||
subscriptionState | discriminated-union | Render a standardized subscription lifecycle badge without hand-wiring tone, icon, and label. | |||
children | snippet | Required badge content unless subscriptionState is provided; optional content override for the subscription preset label. |