Tag
Overview
Usage
Examples
API
A tag is an inline, rounded status or label pill. <rhombus-tag> renders a content-projected label themed by colour role — the four post/page lifecycle statuses (draft, published, scheduled, archived) plus generic semantics (info, success, warning, error). It is bespoke — no Material primitive — and adds no new tokens: it reuses the contract's --status-* and --toast-* pairs, so it re-skins when you toggle the theme above.
Example
When to use
- To label the status of an entity inline — a post that is Draft / Published / Scheduled / Archived, a build that passed or failed, a feature flagged Beta.
- As a static, read-only category or tag beside a title or in a table cell. The projected text carries the meaning; the colour reinforces it.
When not to use
- For a count or a small dot anchored to another element, use a Badge — it is an overlay notification marker, not an inline label.
- For a selectable or removable token (filters, multi-select), use a Chip, which wires into Material's chip listbox.
- For a persistent, dismissible message banner, use an Alert.
Related components
Was this page helpful?