Color Swatch
ProA small square or circular preview of a colour value, used in design token documentation, colour pickers, and theme editors. Displays the colour fill alongside its hex, RGB, or token name label. Supports a selected state with a checkmark overlay for colour selection interfaces.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Square colour swatch with hex label. | Use in token documentation and colour palette displays. |
| With Copy |
Usage Guidelines
Do
Show the colour value (hex, token name) alongside the swatch.
Don't
Display swatches without their colour value label.
Do
Use a border on light colours to distinguish them from the background.
Don't
Use swatches smaller than 24x24px — they become hard to distinguish.
Do
Ensure selected state is indicated with more than just a colour change — use a checkmark.
Don't
Rely on the swatch colour alone for communication — always include a text label.
Code
Design Tokens
Accessibility
- Use role="option" within a role="listbox" for selectable swatch groups.
- Provide aria-label with the colour name and value — "Brand blue, #2563EB".
- Selected state uses aria-selected="true" and a visual checkmark.
- Ensure the border provides sufficient contrast against both light and dark backgrounds.