Badge
A small status label rendered as a pill, styled with the shadcn variant system.
Badge
<.badge>Badge</.badge>
Examples
Variants
The four built-in variants.
Default
Secondary
Destructive
Outline
<div class="flex flex-wrap gap-2">
<.badge variant="default">Default</.badge>
<.badge variant="secondary">Secondary</.badge>
<.badge variant="destructive">Destructive</.badge>
<.badge variant="outline">Outline</.badge>
</div>
Props
| Name | Type | Default | Values |
|---|---|---|---|
| class | :string | ||
| rest | :global | ||
| variant | :string | "default" | default | secondary | destructive | outline |
| inner_block (slot) | :slot |