Overview

Purpose

Swatches are used to showcase colour options or allow the user to configure selected products.

Anatomy

The Swatch component can be broken down into the following elements -

1. Swatch
   Indicates a product colour (and optionally its current interaction and stock state).

2. Stroke
   A white stroke to create definition against the background.

3. Strikeout
   Indicates when the colour is unavailable.

Variants & States

• Size: Regular, Small, Mini
• States: Default, Hover, Focus, Unavailable
• Status: Static, Unselected, Selected
• Gloss on or off (using a gradient)