Swatch Picker
A grid of preset color chips to pick from, lighter than a full color picker.
Preview
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
colors | string | — | Comma-separated hex color list |
value | string | — | Selected color |
columns | string | — | Number of grid columns |
size | string | 1.75rem | Swatch size (CSS length or number of px) |
allow-clear | boolean | — | When set, clicking the selected swatch clears the value |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/swatch-picker.js"></script>import "./pura/lib/swatch-picker.js";