Badge

See all badge styles in the Badges page.

Overview

The <Badge /> component is used to visually represent statuses, tags, categories, or metadata. It supports variants, sizes, and optional icons on either side.

Basic Usage

<Badge variant="accent">
  New
</Badge>

Example

---

Props

Prop	Type	Default	Description
variant	"default" | "muted" | "accent" | "info" | "success" | "warning" | "danger"	"default"	Controls the color and context of the badge
size	"sm" | "md" | "lg"	"md"	Controls the padding, height, and font size
class	string	""	Optional Tailwind classes to override or extend

---

Variants

<Badge variant="default">Default</Badge>
<Badge variant="muted">Muted</Badge>
<Badge variant="accent">Accent</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>

Example

---

Sizes

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>

Example

---

With Icons

<Badge variant="success" size="sm">
  <Plus slot="left-icon" size="xs" />
  Deployed
</Badge>

<Badge variant="info" size="md">
  Info
  <Plus slot="right-icon" size="xs" />
</Badge>

Example

---

Accessibility

• Use badges to supplement context, not replace key content.
• Avoid relying solely on color to convey status.
• Combine with semantic elements (e.g. headings, lists) for clarity.

---

Best Practices

• Use accent or info for attention-catching badges.
• Use success, warning, or danger for status-based messaging.
• Pair with icons when representing state or actions (e.g. deployed, error).
• Avoid using too many badges in dense layouts.