A chip, usually indicating a status, category or count of some sort.
| Property | Type | Description |
|---|---|---|
| id | ?string | A unique identifier. |
| label | ?string | The text content of the badge. |
| icon | ?string | The icon on the left side of the text. |
| icon-right | ?string | The icon on the right side of the text. |
| icon-class | ?string | The class that should be applied to the icon (both sides). [default="h-4 w-4"] |
Content
Slot content
<c-badge label="Content" />
<c-badge>
Slot <strong>content</strong>
</c-badge>
Neutral
Primary
Secondary
Accent
Info
Success
Warning
Error
Soft colors
Neutral
Primary
Secondary
Accent
Info
Success
Warning
Error
<c-badge label="Neutral" class="badge-neutral" />
<c-badge label="Primary" class="badge-primary" />
<c-badge label="Secondary" class="badge-secondary" />
<c-badge label="Accent" class="badge-accent" />
<c-badge label="Info" class="badge-info" />
<c-badge label="Success" class="badge-success" />
<c-badge label="Warning" class="badge-warning" />
<c-badge label="Error" class="badge-error" />
<c-divider class="my-3" label="Soft colors" />
<c-badge label="Neutral" class="badge-neutral badge-soft" />
<c-badge label="Primary" class="badge-primary badge-soft" />
<c-badge label="Secondary" class="badge-secondary badge-soft" />
<c-badge label="Accent" class="badge-accent badge-soft" />
<c-badge label="Info" class="badge-info badge-soft" />
<c-badge label="Success" class="badge-success badge-soft" />
<c-badge label="Warning" class="badge-warning badge-soft" />
<c-badge label="Error" class="badge-error badge-soft" />
Completed
In progress
Error
<c-badge label="Completed" icon="check" class="badge-success" />
<c-badge label="In progress" icon-right="clock" class="badge-info" />
<c-badge label="Error" icon="ban" icon-right="ban" icon-class="h-4 w-4 text-error" />
<c-button>
Inbox
<c-badge label="+99" class="badge-neutral badge-sm" />
</c-button>
<c-button class="indicator">
Inbox
<c-badge label="7" class="badge-secondary badge-sm indicator-item" />
</c-button>