General
Color Swatch
Color swatch components for displaying product color variants on tiles.
Overview
The ColorSwatch component provides compact visual representation of product color options, enabling customers to browse variants without leaving product listings. Implemented as a single HTML element for optimal performance, it uses CSS linear-gradients to display multi-color swatches. Maximum of 4 visible swatches prevents visual clutter while the '+n' overflow indicator communicates additional options. Interactive states including hover tooltips improve color name discoverability.
Key Business & UX Benefits
- Speeds up variant discovery so customers find the right color quickly.
- Keeps product lists clean with compact, recognizable swatches.
- Improves accessibility with tooltips and clear selection states.
- Reduces layout shift and load with lightweight CSS-based rendering.
Pro-Tip from Larry: Use the hover tooltip so customers see the exact color name before clicking.
Usage
Single Color
Color Swatch Single Color
<LuiColorSwatch />
Multiple Colors
Color Swatch Multiple Colors
<LuiColorSwatch />
Feature List
- Displays up to two colors per swatch using linear-gradient
- Shows color name tooltip on hover
- Overflow handling with '+n' indicator for 5+ variants
- Accessible with proper ARIA labels
API Reference
| Prop | Default | Type |
|---|---|---|
colorsrequired | Swatch | |
colorMode | default | "default" | "on-light" | "on-dark" | "on-bright" |
isSelected | false | boolean |
href | string |