Tag
Compact inline labels for categorisation, status, and metadata. Use diwa-tag for static labels and diwa-tag-dismissible when the user needs to remove an item.
diwa-tag — Properties
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'error' | 'neutral' | Visual colour variant that communicates semantic meaning. |
compact | boolean | false | Enables dense mode. Renders a smaller tag with reduced padding and font size for dense layouts. |
icon | string | — | Lucide icon name (kebab-case) displayed before the label. Omit to show no icon. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. Sets data-theme on the host so CSS variable overrides cascade into the shadow DOM. |
diwa-tag — Events
diwa-tag is a non-interactive display component and emits no events.
diwa-tag — Slots
| Slot | Description |
|---|---|
default | Tag label text. |
diwa-tag-dismissible — Properties
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'error' | 'neutral' | Visual colour variant. |
compact | boolean | false | Enables dense mode for the dismissible tag. |
label | string | 'Remove' | Accessible aria-label for the dismiss button. Describe what is being removed. |
theme | 'dark' | 'light' | 'dark' | Per-component theme override. |
diwa-tag-dismissible — Events
| Name | Detail type | Bubbles | Description |
|---|---|---|---|
dismiss | void | No | Emitted when the user clicks the dismiss button. Bubbles and composed are both false. |
diwa-tag-dismissible — Slots
| Slot | Description |
|---|---|
default | Tag label text. |