Tile
A tile is a rounded square that takes an asset and represents a noun.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Tile } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | — | What goes inside. A letter, an initial or a small glyph. |
| size | 'small' | 'medium' | 'large' | 'medium' | Match it to the row it sits in. |
| color | 'blue' | 'green' | 'red' | 'purple' | — | Picks the ground. Use it to separate kinds of thing, not to rank them. |
| label | string | — | Names what the tile stands for, when the tile is not beside a visible name. |
Accessibility
What the component does for you, and what it needs from you.
- Beside a visible name the tile is decorative and does not need a label.
- Standing alone it needs a label naming the thing, because a letter is not a name.
- Colour is the only difference between the four grounds, so nothing can depend on it alone.