---
title: "Swatch"
canonical: https://sky-ui.cf.sky.com/components/swatch
---

# Swatch

Swatch components are used to showcase available colour options.

## 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 -

## 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)