Actions

Badge

Compact status and metadata labels.

Variants

Status and metadata labels in five tones.

AccentSoftOutlineMutedDanger

import { Badge } from "@/components/ui";

<div className="flex flex-wrap items-center gap-3">
  <Badge variant="accent">Accent</Badge>
  <Badge variant="soft">Soft</Badge>
  <Badge variant="outline">Outline</Badge>
  <Badge variant="muted">Muted</Badge>
  <Badge variant="danger">Danger</Badge>
</div>