primitives
@pdfcn-vue/badgeBadge
Compact status or category label.
Installation
Terminal
npx shadcn-vue@latest add @pdfcn-vue/badgeUsage
Example
<Badge variant="success">Paid</Badge>
<Badge variant="outline" size="sm">Draft</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'primary' | 'success' | 'warning' | 'destructive' | 'info' | 'outline' | 'default' | Badge tone. |
| size | 'sm' | 'md' | 'lg' | 'md' | Badge size. |
Live preview
The gallery uses a shared document. Change its theme in the theme builder to compare tokens.
Source files
Need the full template?
See blocks for invoices and reports composed from these primitives.