◈

Badge

Display

A compact status indicator for labeling, classifying, or highlighting elements.

Preview

Badge

Code

VUE

<Badge>
  Badge
</Badge>

Props

Label

The badge text content

Variant

Color variant conveying semantic meaning

Size

Size of the badge

Dot

Adds a colored dot indicator before the text

Props API

Prop	Type	Default	Required	Description
`label`	`string`	`"Badge"`	—	The badge text content
`variant`	`select`"default" \| "success" \| "warning" \| "error" \| "info" \| "outline"	`"default"`	—	Color variant conveying semantic meaning
`size`	`select`"sm" \| "md"	`"md"`	—	Size of the badge
`dot`	`boolean`	`false`	—	Adds a colored dot indicator before the text

Usage

Use semantic variants to communicate status at a glance: "success" for live/active, "warning" for pending/attention, "error" for failed/critical, "info" for neutral context. Avoid stacking multiple badges next to each other.

Accessibility

Rendered as a <span> — surrounding context must convey the badge meaning.
When color alone communicates status, add a visually hidden text alternative.