Badge

A compact component perfect for displaying status labels, category tags, and badges.

Display

Variants

Active

Primary

Props:

variant="primary"

Success

Props:

variant="success"

Warning

Props:

variant="warning"

Error

Props:

variant="error"

Draft

Outline

Props:

variant="outline"

Active

With Dot

Props:

variant="primary"withDot="true"

Props / API

Prop	Type	Default	Description
`variant`	`string`	`primary`	Badge color: primary, success, warning, error, outline
`size`	`string`	`md`	Badge size: sm, md, lg
`pill`	`boolean`	`true`	Pill-shaped badge
`dismissible`	`boolean`	`false`	Show close button
`className`	`string`	`-`	Additional CSS classes

Usage

<!-- Basic Badge -->
<Badge variant="primary">Active</Badge>

<!-- Success Badge -->
<Badge variant="success">Completed</Badge>

<!-- Dismissible Badge -->
<Badge variant="warning" dismissible>Warning</Badge>

<!-- In List -->
<div class="space-y-2">
  <Badge>Tag 1</Badge>
  <Badge>Tag 2</Badge>
  <Badge>Tag 3</Badge>
</div>