Badge

Small status indicator for counts, labels, or status.

Default

Badge

Variants

Badges support different variants for various status types.

Variants

Default Secondary Success Destructive Outline

    <.badge>Default</.badge>
<.badge variant="secondary">Secondary</.badge>
<.badge variant="success">Success</.badge>
<.badge variant="destructive">Destructive</.badge>
<.badge variant="outline">Outline</.badge>
  

As Link

Badges can render as links when given an href prop.

As Link

Documentation