ColorSwatch
Visual swatch button for selecting color and finish options on product detail surfaces.
Best for
Import
import { ColorSwatch } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use ColorSwatch when the option itself is visual enough that a text-only control would slow the decision down. It works well for finishes, paint colors, and fabric tones.
Always pair the swatch with a readable label somewhere nearby so the choice is not communicated by color alone.
Composition notes
Use variant="circle" for classic commerce swatches and variant="rounded" when the row needs a slightly softer or denser feel. size="compact" is useful when many options need to fit in a tight space.
Keep the selected state connected to the same product option source of truth as the rest of the PDP controls.
Behavior and theming guidance
Swatches should be easy to compare at a glance. Keep spacing consistent and avoid mixing several visual swatch treatments in the same selector.
When a product has many subtle finishes, consider showing the selected label and maybe a larger preview elsewhere so the decision stays clear.
Examples
Live examples you can edit directly in the sandbox.
Circular swatches
The default style works well for classic finish selection on product detail pages.
Rounded compact swatches
Use the rounded compact treatment when the option rail needs to feel denser and more editorial.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | — | CSS color value used as the swatch background |
| selected | boolean | — | Whether this swatch is currently selected |
| onClick | () => void | — | Callback fired when the swatch is clicked |
| label | string | — | Accessible label for the swatch, used as aria-label |
| className | string | — | No description yet. |
| variant | string | circle | Visual shape of the swatch |
| size | string | default | Size preset for the outer button and inner color chip |