Tags
The Tags component provides a reusable pattern for tags in the interface.
Basic tags
Plain tags rendered as spans, prefixed with the default # character.
Tags with links
When each tag item includes an href, the tag is rendered as a clickable anchor element.
Pill-shaped tags
Applying tagsStyle 'pill' gives each tag a rounded, pill-shaped appearance with a card background and shadow.
Compressed tags
Setting compress to a number shows only the first N tags and hides the rest behind an expandable indicator.
Formatted tags
With format enabled, tag labels are lowercased and word-spacing is reduced for a compact typographic style.
Tags with colour markers
Enabling tagsMarker replaces the # prefix with a small filled circle icon coloured by each tag's color value.
API
| Parameter | Default | Description |
|---|---|---|
|
style
|
default | - |
|
componentElement
|
div | |
|
beforeLabel
|
# | |
|
icon
|
[] | Same specification as Icon, adds an icon |
|
afterLabel
|
||
|
format
|
false | If the component should format the input text. |
|
compress
|
false | Show [N] amount of items, hide the rest of them behind a expand indicator. |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-tags--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-tags--color--surface
|
var(--color--surface) | color | - | Surface |
|
--c-tags--corner-shape
|
var(--corner-shape) | select | square, round, squircle, circular, bevel, scoop | Corner Shape |
|
--c-tags--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-tags--shadow-color
|
var(--shadow-color) | rgba | - | Shadow Color |
|
--c-tags--shadow-amount
|
var(--shadow-amount) | range | - | Multiplier for elevation shadows. 0 = none, 1 = default. |