---
title: "Swatch — React"
canonical: https://sky-ui.cf.sky.com/components/swatch/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Swatch — React

Swatch components are used to showcase available colour options.

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

---

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

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

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

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

- [display](/core/system/display/)
- [flex-child](/core/system/flex-child/)
- [margin](/core/system/margin/)