HabIconTile
A rounded-square hue tile with an icon — the leading element of a row.
<HabIconTile :icon="mdiInformation" color="var(--hab-blue-darken-2)" />It says what kind of thing something is. HabAvatar says who. That is the whole distinction between them, and it is worth keeping: a tile where an avatar belongs reads as a category, and the reader will look for the category elsewhere.
Sizes
28 / 32 / 40px, each paired with the icon step that belongs to it — sm takes a 16px glyph, md an 18, lg a 20.
This is not the control ladder. A tile is not a control, and 32px is not a control height. It also never shrinks in a flex row: a tile that squashes is worse than one that pushes the text along.
The hue
The fill is a 14% tint of color and the glyph takes it at full strength — the same ratio HabBadge and HabChip use for an arbitrary color, so a tile and a badge for one entity read as the same hue.
Any CSS color works. The palette is where a color that belongs to the data lives:
<HabIconTile :icon="entity.icon" :color="entity.hue" />See the palette for which colors are a choice and which are not — a status is a semantic token, not a hue.
Accessibility
- The glyph is
aria-hidden, always. The tile is decoration on a row whose text says which thing this is. - The hue must not be the only thing carrying the kind. A color-blind reader, and anyone in forced-colors mode, needs the kind stated in the row's content.
- As a background tint rather than a border or text, it has no contrast floor of its own — but the glyph on it does, and it is your color. Check anything far outside the palette.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | "var(--hab-accent)" | The entity hue — a 14% tint behind a full-strength glyph. Any CSS color, including one that comes from data. This says what kind of thing something is. HabAvatar says who. |
icon | string | undefined | SVG path data, e.g. mdiFileOutline from @mdi/js. |
size | "md" | "sm" | "lg" | "md" | — |
Slots
| Slot | Bindings | Description |
|---|---|---|
default | any | Replaces the glyph entirely. Not leading: the glyph is the whole tile. |