ColorSwatch

One color, drawn as the color itself. Its name belongs in a tooltip, so a picked swatch carries only a tick.

import { ColorSwatch } from '@basmilius/react-ui';

import { useState } from 'react';
import { ColorSwatch, Tooltip } from '@basmilius/react-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: no color at all, or the button that opens the rest of a palette. Children replace the tick, such as an ellipsis on a "more colors" swatch. on="popup" tightens the ring of a picked swatch for one inside a popup.

ColorSwatch is a button. For a row of them, give the row role="radiogroup" and each swatch role="radio" and aria-checked, as the demo does, or use AccentSwatches, which does it for you.

In a menu, make each swatch an item that is no row with render={<Menu.Item unstyled />}. The arrow keys reach it and picking it closes the menu, while the row's padding and highlight stay off the circle; the swatch draws the accent outline under the keyboard itself. See the swatches in Menu.

Props

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

Prop	Type	Default
color	string		Any CSS color.
picked	boolean	false
on	'surface' | 'popup'	'surface'	What the swatch stands on, which the ring is offset against.
render	RenderProp		Another element to be the swatch, such as a menu trigger or <Menu.Item unstyled />.

ColorSwatchProps is an exported type.