Size Picker

About this piece

Six-slot size grid with a tone-filled selected cell and a diagonal line over sold-out sizes, plus an optional size guide link.

Usage

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

import { Commerce3 } from "@/components/beste/piece/commerce3";

<Commerce3
  title="Size"
  selected="M"
  sizes={[
    {
      "label": "XS"
    },
    {
      "label": "S",
      "soldOut": true
    },
    {
      "label": "M"
    },
    {
      "label": "L"
    },
    {
      "label": "XL"
    },
    {
      "label": "XXL",
      "soldOut": true
    }
  ]}
  tone="foreground"
  bordered={false}
/>