Swatch

Anatomy

import { Swatch } from "chroma-panel";

Only inside a panel

This is one of the parts the built-in modes are made of. It reads the colour through usePanel(), so it only works inside a ChromaPanel — typically in a custom mode. For a picker outside the panel, use the store and hooks.

API reference

Props

Prop	Type	Default	Description
color*	string	—	The colour it shows and reports. Any CSS colour string.
label	string	the colour string	Accessible name. Give named swatches a real name rather than a hex value.
matchKey	string	the colour string	The value compared against the current colour to decide the selected ring. Set it when the displayed colour is not what selection should match on.
round	boolean	false	Render as a circle instead of a rounded square.
disabled	boolean	false	Makes the swatch unselectable.
onSelect	(color: string) => void	—	Fires with the colour when chosen.
className	string	—	Class on the swatch.