React · SwiftUI · agent guides
Swatch
A colour as a hard, glossy chip in its own colour: a sheen, an engraved hex in dark or light ink by the colour's luma, a recessed LED dimple.
Use it for
- A colour someone dropped or picked: a lone hex on the canvas, a palette entry, the colour a block is tinted with.
- Handing a colour to a picker: with onClick it is a button and the host opens its colour picker.
Don't use it for
- Status or meaning. A swatch is the colour itself, never a signal (use an LED or a status badge).
- A row of choices to pick from. Several swatches side by side are fine, but the choosing is the host's picker.