Icon tile
A glyph on a soft square of its own colour, so a row of kinds can be told apart before it is read.
Use it where a list of kinds needs telling apart: leave types, shipment modes, item categories, KPI tiles that measure different things, the groups of a pending-actions panel. One tile per card or row, not an icon on every word. Tones code kinds, never status: overdue, rejected and paid stay with Tag colours, and rose is not for something neutral. The module tone (the default) is the product’s own hue, read from --module.
Tones
module is the product’s hue (Inventory here); the other eight are --tone-* and hold contrast in both themes.
Sizes
A list of kinds
Leave types in People: one tile per type, a different tone each, because they are different things.
Options
Everything you can pass to Icon tile.
| Prop | Type | Default | What it does |
|---|---|---|---|
| icon | IconName | — | Any name registered in ICONS. |
| tone | 'module' | 'blue' | 'teal' | 'green' | 'amber' | 'orange' | 'rose' | 'violet' | 'slate' | 'module' | module reads --module from the nearest data-module. TONES lists the other eight in a good order for a row. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | 20, 28, 36 and 48px. |
| label | string | — | Only when the tile is the whole content of a control; otherwise it is hidden from assistive tech. |