General
Swatch Summary
Compact swatch summary for product tiles with overflow indicator.
Overview
SwatchSummary is the compact swatch summary used on product tiles. It renders up to N visible SwatchChip items plus an overflow indicator when the variant count exceeds the limit.
For the underlying single-color primitive, see Swatch. For an interactive picker row with selected and focus states, use SwatchOption.
Key Business & UX Benefits
- Visible color options on listing tiles lift click-through to PDPs, helping shoppers identify products that match what they are looking for.
- Overflow indicator means a product with twenty colors still fits neatly inside a tile without breaking grid alignment.
- Configurable visible count lets merchandising tune density per breakpoint without bespoke styling on each listing variant.
Usage
SwatchSummary Default
<SwatchSummary :swatches="product.colorSwatches" :limit="4" />
Feature List
- `swatches` accepts a typed `SwatchChipProps[]`, so consumers pass the same color tuples used by the chip primitive
- `limit` prop (default 4) slices the visible set and computes the `+n` overflow count via `Math.max(swatches.length - limit, 0)`
- Configurable per-breakpoint density: tune `limit` for tighter rows on mobile and wider ones on desktop without bespoke styles
- Reuses `SwatchChip` for each visible item, so chip styling and tone awareness carry through unchanged
- Overflow indicator keeps grid alignment clean on products with 20+ variants, where listing layouts otherwise break
API Reference
| Prop | Default | Type |
|---|---|---|
swatchesrequired | SwatchChipProps[] { colors, selected, href, 1 more } | |
selectedIndex | 1 | number |
limit | 4 | number |
surfaceTone | SurfaceTone ("dark" | "light" | "bright") |
| Event | Type |
|---|---|
click | (event: "click", index: number): void |