Swatch - React

View on Figma View on GitHub

import { Swatch } from '@sky-uk/ui-core';

<Swatch $colorway="#2e4768" $gradient='linear-gradient(45deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0) 100%)'/>

Props

Prop	Type	Default	Description
`$size`	string	regular	Sets the size of the swatch. Options are 'mini', 'small', and 'regular'.
`$colorway`	string	black	Sets the background color of the swatch. Accepts any valid CSS color value.
`$gradient`	string	-	Sets the background gradient of the swatch. Accepts any valid CSS gradient value.
`$image`	string	-	Sets the background image of the swatch. Accepts any valid image URL.
`$outline`	boolean	false	An outline that provides contrast against the background the Swatch is used on.
`$selected`	boolean	false	Adds a selected state to the swatch, indicating it is currently selected.
`$unavailable`	boolean	false	Adds a strikethrough to the swatch, indicating it is not selectable.

Sizes

<Flex $gap={4} $alignItems="center">
  <Swatch $size="mini" />
  <Swatch $size="small" />
  <Swatch />
</Flex>

Styles

Set a background colour using $colorway which takes any valid css background-color value.
Apply an image using $image as an image path. Optionally use a transparent png with $colorway to overlay a texture. You can also use $gradient separately or with $colorway.
Add an outline to the swatch using $outline. This provides a contrast against the background the swatch is used on, ensuring it is visible even on similar background colors.
Use the $selected prop to indicate the swatch is currently selected, while $unavailable adds a strikethrough to show it is not selectable. The $unavailable prop takes precedence over $selected.

<Flex $gap={4} $alignItems="center">
  <Swatch $colorway="#D7B8AE"/>
  <Swatch $colorway="#4E5B70" $image="https://www.transparenttextures.com/patterns/45-degree-fabric-light.png" />
  <Swatch $colorway="#506055" $gradient='linear-gradient(45deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0) 100%)'/>
  <Swatch $colorway="#D2D0D4" $outline />
  <Swatch $colorway="#dcc23b" $selected />
  <Swatch $colorway="#abbe91" $gradient='linear-gradient(45deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.3) 50%, rgba(0,0,0,0) 100%)' $unavailable />
</Flex>

Selectable

Add interaction cues by providing an href or onClick with relevant props.

<Flex $gap={4} $alignItems="center">
  <Swatch href="#" />
  <Swatch onClick={() => {}} />
  <Swatch onClick={() => {}} $selected />
  <Swatch onClick={() => {}} $unavailable disabled />
</Flex>

System Modifiers

This component also supports the props applied using the following system modifiers: