Return to Sky UI homepage

Swatch - Overview

View on FigmaView on GitHub

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. 1
  2. 2
  3. 3

  1. Swatch

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

  2. Contrast outline

    An outline that provides contrast against the background the Swatch is used on. Defaults to grey-50.

  3. Strikeout

    Indicates when the colour is unavailable.

Variants & States

  • Size: Regular, Small, Mini
  • States: Default, Hover, Focus, Unavailable
  • Status: Static, Unselected, Selected
  • Contrast outline: On, Off
  • Gloss: On, Off (using a gradient)
Default
Unavailable
Selected
Contrast outline
Gloss ON