Badge
The <vara-badge> component renders a compact status label.
Usage
<vara-badge text="Beta" color="info" />
Preview
BetaProps
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "" | Badge text. Falls back to slot content. |
size | string | "md" | One of: sm, md, lg. |
variant | string | "soft" | One of: soft, solid, outline. |
color | string | "neutral" | One of: neutral, info, success, warning, error. |
class | string | "" | Additional CSS classes. |
Variants
Soft
Default Info SuccessSolid
Warning ErrorOutline
Neutral InfoSizes
Small Medium LargeWith a slot
Provide a text prop or put the label between the tags. Both are equivalent:
<vara-badge color="success">New</vara-badge>