ColorSwatch
Renders a solid-color square swatch. Useful in color pickers, palette showcases, and anywhere you need to visually represent a color value. Supports custom size, radius, and optional overlay children (e.g. a checkmark for selection state).
Basic palette
<ColorSwatch color="var(--dv-color-blue-filled)" />
<ColorSwatch color="var(--dv-color-violet-filled)" />
<ColorSwatch color="var(--dv-color-green-filled)" />Sizes
<ColorSwatch color="#228be6" size="xs" />
<ColorSwatch color="#228be6" size="sm" />
<ColorSwatch color="#228be6" size="md" />
<ColorSwatch color="#228be6" size="lg" />
<ColorSwatch color="#228be6" size="xl" />Radius variations
<ColorSwatch color="#7950f2" radius={0} />
<ColorSwatch color="#7950f2" radius="sm" />
<ColorSwatch color="#7950f2" radius="50%" />With shadow and child content
✓
<ColorSwatch color="#2f9e44" withShadow>
<span style="color:white">✓</span>
</ColorSwatch>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | — | CSS color value for the swatch fill (required) |
size | 'xs'|'sm'|'md'|'lg'|'xl'|number|string | — | Width and height of the swatch |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Border-radius of the swatch shape |
withShadow | boolean | — | Adds an inset box-shadow for contrast on light backgrounds |
component | string | 'div' | HTML element to render as root |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |
children | ReactNode | — | Optional overlay content (e.g. checkmark) |