useColorSwatch

Provides the accessibility implementation for a color swatch component. A color swatch displays a preview of a selected color.

Example

ColorSwatch.tsx

ColorSwatch.css

Example

ColorSwatch.tsx

ColorSwatch.css

import {ColorSwatch} from './ColorSwatch';

<ColorSwatch color="#f00a" />

API

useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria

Name	Type
`color`	`string \| Color`
The color value to display in the swatch.
`colorName`	`string`
A localized accessible name for the color. By default, a description is generated from the color value, but this can be overridden if you have a more specific color name (e.g. Pantone colors).

Name	Type
`colorSwatchProps`	`HTMLAttributes<HTMLElement>`
Props for the color swatch element.
`color`	`Color`
The parsed color value of the swatch.