<ColorSwatch/>

A component includes a single color swatch

tip

Color swatches background color is bases on CSS, if you want to add new color add a new CSS file and use the fast-swatch-color-{color-name} prefix

swatches.css
.fast-swatch-color-blue{
    background: blue;
}

.fast-swatch-color-very-blue-color{
    background: blue;
}

We also support the legacy format used in our JS client, using the isp-product-color-swatch-${color_name} prefix

swatches.css
.isp-product-color-swatch-blue {
    background: blue;
}

.isp-product-color-swatch-very_blue_color {
    background: blue;
}

Props

Option	Type	Description
color	string (required)	Color swatch color name
selected	boolean (default=false)	is swatch selected
className	string	Custom class for the swatch

Props​

Props