Swatch - React

View on Figma View on GitHub

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

Select background colour

<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%)'/>

<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

Select background colour

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

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

Select background colour

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

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

Select background colour

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

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