ColorSwatch
atomStandalone color swatch atom. Supports circle and square shapes, six sizes (xs–2xl), a selected state with an inset ring, and a checkerboard background for colors with transparency. Fully interactive as a button.
Shapes and sizes
Circle and square shapes across different sizes.
Selected and transparency
Selected state with inset ring and checkerboard for alpha colors.
Usage
Installation
API Reference
ColorSwatch props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
color* | string | — | CSS color value to display. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Swatch diameter / side length. |
shape | "circle" | "square" | "circle" | Swatch shape. |
selected | boolean | false | Shows an inset ring to indicate selection. |
showCheckerboard | boolean | false | Shows a checkerboard pattern behind transparent colors. |
onClick | () => void | — | Click handler — makes the swatch interactive. |