Color swatch

<ColorSwatch color='#0D3636' />

Caution

This components only accepts a valid CSS color value or gradient, with the exception of named colors, of which only transparent is supported.

Empty state

<ColorSwatch />

Transparent color

<ColorSwatch color='#4433EE80' />

Gradients

<ColorSwatch
	gradient='linear-gradient(#0D3636, rgb(249 250 251))'
	colorName='Linear gradient'
/>
<ColorSwatch
	gradient='radial-gradient(#0D3636, rgb(249 250 251))'
	colorName='Radial gradient'
/>
<ColorSwatch
	gradient='conic-gradient(#0D3636, rgb(249 250 251))'
	colorName='Conic gradient'
/>

Providing a custom color name

For colors, the color name will be automatically generated based on the color value. If you want to provide a custom color name, you can do so by passing the colorName prop.

You should provide this for gradients.

<ColorSwatch
	color='#0D3636'
	colorName='eightshift dark green'
/>