Preview Updated 2026-05-10

ColorSwatch

A single color sample, commonly used inside palettes — supports a selected ring and an "add" button variant.

Basic usage

Any CSS color (including tokens like var(--accent-1)). selected shows a selection ring; add switches to a dashed + plus-icon placeholder.

src/App.vue vue

<CfColorSwatch color="var(--accent-1)" :selected="true" />
<CfColorSwatch color="var(--status-success)" />
<CfColorSwatch color="#dc3545" />
<CfColorSwatch add label="Add color" />

src/App.tsx tsx

<CfColorSwatch color="var(--accent-1)" selected />
<CfColorSwatch color="var(--status-success)" />
<CfColorSwatch color="#dc3545" />
<CfColorSwatch add label="Add color" />

Size / shape / state

3 sizes, square / round shapes, with selectable and disabled states.

src/App.vue vue

<CfColorSwatch size="sm" color="var(--accent-1)" />
<CfColorSwatch size="md" color="var(--accent-1)" />
<CfColorSwatch size="lg" color="var(--accent-1)" />
<CfColorSwatch shape="round" color="var(--accent-1)" />
<CfColorSwatch :selected="true" color="var(--accent-1)" />
<CfColorSwatch disabled color="var(--accent-1)" />

src/App.tsx tsx

<CfColorSwatch size="sm" color="var(--accent-1)" />
<CfColorSwatch size="md" color="var(--accent-1)" />
<CfColorSwatch size="lg" color="var(--accent-1)" />
<CfColorSwatch shape="round" color="var(--accent-1)" />
<CfColorSwatch selected color="var(--accent-1)" />
<CfColorSwatch disabled color="var(--accent-1)" />

API

Prop	Type	Default	Description
`color`	`string`	—	Any CSS color or token
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	18 / 24 / 32 px
`shape`	`'square' \| 'round'`	`'square'`
`selected`	`boolean`	`false`	Selection ring
`add`	`boolean`	`false`	Add-placeholder (dashed + plus)
`disabled`	`boolean`	`false`
`label`	`string`	—	Custom aria-label