ColorSwatch

One color, drawn as the color itself. A picked swatch shows a tick.

import { ColorSwatch } from '@adecore/ui';

import { useState } from 'react';
import { ColorSwatch, Tooltip } from '@adecore/ui';

const COLORS = [
    { name: 'Blue', color: '#2563eb' },
    { name: 'Violet', color: '#7c3aed' },
    { name: 'Rose', color: '#e11d48' },
    { name: 'Amber', color: '#d97706' },
    { name: 'Green', color: '#16a34a' }
];

export default function ColorSwatchDemo() {
    const [picked, setPicked] = useState<string | null>('Violet');

    return (
        <div className="flex items-center gap-2" role="radiogroup" aria-label="Label color">
            <Tooltip label="No color">
                <ColorSwatch role="radio" aria-checked={picked === null} aria-label="No color" onClick={() => setPicked(null)} />
            </Tooltip>
            {COLORS.map(({ name, color }) => (
                <Tooltip key={name} label={name}>
                    <ColorSwatch
                        role="radio"
                        aria-checked={picked === name}
                        aria-label={name}
                        color={color}
                        picked={picked === name}
                        onClick={() => setPicked(name)}
                    />
                </Tooltip>
            ))}
        </div>
    );
}

Without a color the swatch is an outlined circle, for "no color" or a "more colors" button. Children replace the tick, such as an ellipsis. tick={false} leaves the ring alone to mark the pick, for a two-tone swatch. on="popup" tightens the ring inside a popup.

Give each swatch an aria-label and a Tooltip with the name. For a row, give it role="radiogroup" and each swatch role="radio" and aria-checked, or use AccentSwatches or ColorWheelPicker.

In a menu, render each swatch as render={<Menu.Item unstyled />}. See Menu.

Props

ColorSwatch takes every prop of a <button>, plus:

Prop	Type	Default
color	string		Any CSS color.
picked	boolean	false
tick	boolean	true	Whether a picked swatch draws its tick.
on	'surface' | 'popup'	'surface'	What the swatch stands on.
render	RenderProp		Such as a menu trigger or <Menu.Item unstyled />.

ColorSwatchProps is an exported type.