Component

Badge

Compact label for status, count, or category. Used inline alongside other content.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/badge

Usage

Badges communicate status or categorization at a glance. Keep labels short.

Playground

Preview

Badge

Configure

Variant

Label

Badge text

Code

<Badge>Badge</Badge>

Variants & States

Supported variants, sizes, and interaction states for this component.

Variants

Default
Secondary
Outline
Destructive
Ghost
Link

States

Default
Hover

Do

Keep text under 3 words
Use secondary for neutral/informational states
Use destructive sparingly for errors or warnings

Don't

Don't use as a button replacement
Don't stack more than 3 badges in a row