Variant Swatches

About this piece

Color picker row with circular palette swatches, a ringed check on the selected color, and a diagonal line over sold-out options.

Usage

The import and the props worth knowing about, in one place.

import { Commerce2 } from "@/components/beste/piece/commerce2";

<Commerce2
  surface="card"
  bordered={false}
  inverted={false}
  title="Color"
  selected="Tan"
  swatches={[
    {
      "color": "black",
      "label": "Black"
    },
    {
      "color": "white",
      "label": "Ivory"
    },
    {
      "color": "tan",
      "label": "Tan"
    },
    {
      "color": "olive",
      "label": "Olive",
      "soldOut": true
    }
  ]}
/>