Color Swatch

Usage

import { ColorSwatch } from "@chakra-ui/react"

<ColorSwatch />

Examples

Sizes

Use the size prop to change the size of the color swatch.

Alpha

Here's an example of how to create a color swatch with an alpha channel.

With Badge

Here's an example of how to compose the ColorSwatch with a Badge.

Mixed Colors

Use the ColorSwatchMix to create a color swatch that contains multiple colors, but retains the size of a single color swatch.

Palette

Here's an example of composing multiple swatches to create a palette.