ColorSwatchPicker

Picks a color from a set of swatches.

ColorSwatchPicker.tsx

import {ColorSwatchPicker, ColorSwatchPickerItem} from 'alinea/components'

const colors = ['#e8e0d2', '#c9a27e', '#8a5a3b', '#5b6b4f', '#3e4a5c']

export function ColorSwatchPickerExample() {
  return (
    <ColorSwatchPicker aria-label="Fabric color" defaultValue="#8a5a3b">
      {colors.map(color => (
        <ColorSwatchPickerItem key={color} color={color} />
      ))}
    </ColorSwatchPicker>
  )
}

Props

`<ColorSwatchPicker>`

A list of color swatches to pick one color from

PropTypeDefaultDescription

valuestringDefault –The selected color

defaultValuestringDefault –

onValueChange(color: string) => voidDefault –

layout'grid' | 'stack'Default 'grid'Lay the swatches out in a wrapping row, or a column

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<ColorSwatchPickerItem>`

PropTypeDefaultDescription

color*stringDefault –

disabledbooleanDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<ColorSwatch>`

Shows a color on a checkerboard so transparency is visible

PropTypeDefaultDescription

color*stringDefault –Any CSS color, eg. #f80 or rgb(255 128 0 / 50%)

colorNamestringDefault –Accessible name of the color, derived from the color if left out

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.