Badge
Displays a badge or a component that looks like a badge.
Installation
pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/badge.jsonVariants
| Variant | Description |
|---|---|
default | Primary badge |
secondary | Secondary style |
destructive | Dangerous / error state |
outline | Bordered badge |
ghost | No background |
link | Styled as a link |
DefaultSecondaryDestructiveOutlineGhostLink
Chip Variants
DGA-specific chip styles for selection and filtering contexts.
| Variant | Description |
|---|---|
chip-primary | Primary chip |
chip-primary-selected | Primary chip (selected) |
chip-neutral | Neutral chip |
chip-neutral-selected | Neutral chip (selected) |
Primary ChipPrimary Selected
Neutral ChipNeutral Selected
Sizes
| Size | Description |
|---|---|
default | Inline text badge |
sm | 20px height |
md | 24px height |
lg | 32px height |
DefaultSmallMediumLarge
With Icons
Badges with leading or trailing icons.
Approved Info Error Featured
Next Remove
As Link
Use asChild to render the badge as an anchor or any other element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | "default" | Visual style variant |
size | string | "default" | Badge size |
asChild | boolean | false | Merge props onto child element |
className | string | — | Additional CSS classes |