npm i @velkin/react
import { VuColorSwatch } from "@velkin/react/color-swatch";| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "transparent" | CSS color painted on the chip. Default: `"transparent"`. |
| value | string | "" | Selection token in `vu-select` detail; defaults to `color`. |
| size | VuColorSwatchSize | "md" | Visual size preset. Default: `"md"`. |
| shape | VuColorSwatchShape | "circle" | Chip outline (`circle` or `square`). Default: `"circle"`. |
| checkerboard | boolean | false | Transparency checkerboard under the fill (`checkerboard` attr). |
| selected | boolean | false | Contrast ring and checkmark (`selected` attr). Default: `false`. |
| selectable | boolean | false | Focusable and clickable; emits `vu-select` (`selectable` attr). |
| disabled | boolean | false | Disables interaction when `selectable` (`disabled` attr). |
| readonly | boolean | false | Focusable but does not emit `vu-select` when `selectable`. |
| colorName | string | "" | Accessible name; blank defaults to `Color {color}`. |
| Event | Detail | Description |
|---|---|---|
| vu-select | VuColorSwatchSelectDetail | A `selectable` swatch was activated. |
| Part | Description |
|---|---|
| base | The colored chip (`<button>` when selectable, `<div>` otherwise). |
| Name | Definition |
|---|---|
| VuColorSwatchSelectDetail | |
| VuColorSwatchShape | |
| VuColorSwatchSize | |