Verified
8
99
20+
---
import { Badge } from "@/components/ui/badge"
import { Icon } from "@/components/ui/icon"
---
<div class="flex flex-col items-center gap-2">
<div class="flex w-full flex-wrap gap-2">
<Badge>Badge</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="ghost">Ghost</Badge>
<Badge as="a" variant="link" href="/">Link</Badge>
</div>
<div class="flex w-full flex-wrap gap-2">
<Badge variant="secondary">
<Icon name="badge-check" class="size-3" />
Verified
</Badge>
<Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
8
</Badge>
<Badge
class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
variant="destructive"
>
99
</Badge>
<Badge
class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
variant="outline"
>
20+
</Badge>
</div>
</div>Installation
npx shadcn@latest add @fulldev/badgeUsage
import { Badge } from "@/components/ui/badge"<Badge variant="default">Badge</Badge>Link
Use the polymorphic as prop to render the badge as a link element.
---
import { Badge } from "@/components/ui/badge"
---
<Badge as="a" href="/">Badge</Badge>Polymorphic
Badge is strict polymorphic. Pass as to change the rendered element and
use attributes for that element.
<Badge as="button" type="button">Action</Badge>
<Badge as="a" href="/docs/">Docs</Badge>Notes
- Use variants first before adding custom classes.
Badgeworks well for status labels, counts, and small inline metadata.
API Reference
See the GitHub source code for more information on props.