React SDK

Swatch

The Swatch component acts like a color filter that allows for more granular product/item searching.

Usage

Editable Example

Colors

You can use the pre-defined set of colors by using the syntax <Swatch.Color.{Color} />, or you can use your own using <Swatch.Color /> and pass the required props. Accepted format includes hex, rgb, rgba, hsl, hsla.

Editable Example

Props

Swatch

NameTypeDefaultDescription
checkedColorsstring[][]An array containing id of selected colors.
onChange(id: string) => void() => {}The handler.

Swatch.Color

NameTypeDefaultDescription
idstringThe id of the color.
bgstringThe background color. See above for accepted formats.
colorstringThe color of the checkmark when that color is selected. Defaults to being calculated based on the background color. See above for accepted formats.
borderstringThe border color. Defaults to using bg darkened by 10% if not specified. See above for accepted formats.