Badge

A small label for statuses, counts, and categories.

Variants

Stable Beta Draft Deprecated

<Badge>Stable</Badge>
<Badge variant="secondary">Beta</Badge>
<Badge variant="outline">Draft</Badge>
<Badge variant="destructive">Deprecated</Badge>

In context

mrkdwn v2.0

Sizes

Small Default Large

The badge is a pill by default (rounded-full) — the geist Pill shape is the base style here, no prop needed.

With icons, spinner & link

Published Publishing Changelog

{/* With icon */}
<Badge variant="secondary">
  <svg>…check…</svg>
  Published
</Badge>

{/* With spinner */}
<Badge>
  <svg class="animate-spin">…</svg>
  Publishing
</Badge>

{/* Link — renders as an anchor */}
<Badge variant="outline" render={<a href="/changelog" />}>
  Changelog
  <svg>…arrow…</svg>
</Badge>

For true anchor semantics (the shadcn Link variant) pass render={<a href="…" />} so the badge element is the <a> itself.

Custom colors

Synced Draft New

Markdown for agents: /design/badge.md · spec: /design.md