Tile
A tile is a rounded square that holds an asset to represent something.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 | None | 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' | None | Sets the background colour. Use it to tell kinds of things apart, not to rank them. |
| label | string | None | 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.
- On its own, it needs a label that names the thing, because a letter is not a name.
- The four colour options differ only by colour, so nothing should depend on the colour alone.