PUI.
Copy Markdown
A compact label for statuses, categories, and counts.
Badge keeps its visual treatment intentionally small and composable. Use the
variant attribute for the standard semantic recipes and class to add
application-specific presentation.
Examples
<.badge>Default</.badge>
<.badge variant="secondary">Active</.badge>
<.badge variant="destructive">Error</.badge>
<.badge variant="outline">Draft</.badge>Attributes
| Name | Type | Default | Description |
|---|---|---|---|
variant | string | "default" | Style: "default", "secondary", "destructive", or "outline" |
class | string | "" | Additional CSS classes |
Slots
| Name | Required | Description |
|---|---|---|
inner_block | yes | Badge content |