Beta Preview

ColorSwatch

A ColorSwatch displays a preview of a selected color.

Example
ColorSwatch.tsx
ColorSwatch.css
import {ColorSwatch} from './ColorSwatch';

<ColorSwatch color="#f00" />

Accessibility

By default, ColorSwatch includes a localized color description for screen reader users (e.g. "dark vibrant blue"). Use the colorName prop to override this. Set an aria-label to provide additional context. In this example, a screen reader will announce "Fire truck red, Background color".

import {ColorSwatch} from './ColorSwatch';

<ColorSwatch
  color="#f00"
  aria-label="Background color"
  colorName="Fire truck red" />

API

NameType
colorstring | 
The color value to display in the swatch.
colorNamestring
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).

Default className: react-aria-ColorSwatch

Render Prop
color
The color of the swatch.