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
Name | Type | Default | Description |
---|---|---|---|
checkedColors | string[] | [] | An array containing id of selected colors. |
onChange | (id: string) => void | () => {} | The handler. |
Swatch.Color
Name | Type | Default | Description |
---|---|---|---|
id | string | The id of the color. | |
bg | string | The background color. See above for accepted formats. | |
color | string | The color of the checkmark when that color is selected. Defaults to being calculated based on the background color. See above for accepted formats. | |
border | string | The border color. Defaults to using bg darkened by 10% if not specified. See above for accepted formats. |