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.
When to use
Do
- ✓Use diwa-tag to label the status, category, or type of an item in a list, card, or table.
- ✓Use variant to communicate semantics — success for completed, error for failed, warning for pending.
- ✓Use dense mode (compact) in data tables or sidebar lists where space is limited.
- ✓Use diwa-tag-dismissible when the user can remove items from a set (e.g. filter chips, selected values).
- ✓Pair the icon prop with the variant to reinforce meaning beyond colour alone.
Don't
- ✕Don't use tags as navigation or action triggers — they are non-interactive labels.
- ✕Don't use tag colour as the only indicator of status — always pair colour with a visible text label.
- ✕Don't place too many tags in a single row — limit to 3–4 to avoid visual clutter.
- ✕Don't use diwa-tag-dismissible when removal is not a user action — prefer diwa-tag.
- ✕Don't nest interactive elements or other components inside a tag's default slot.
Choosing the right variant
neutral — Default. Use for categories, types, or metadata with no status connotation.
primary — Accent-coloured highlight. Use for featured, active, or selected items.
info — Informational state. Use for draft, in-review, or neutral informational labels.
success — Positive state. Use for completed, verified, or approved items.
warning — Cautionary state. Use for pending, paused, or needs-attention items.
error — Critical state. Use for failed, rejected, or error-state items.
Dense mode usage
The compact prop enables dense mode by reducing vertical padding and font size. Use it in dense layouts such as table rows, sidebar trees, or any context where the default size would dominate the surrounding content.
Avoid mixing normal and compact tags in the same horizontal group — it creates an uneven baseline.