ColorSwatches
The ColorSwatches component allows a user to select a color from a list of colors. It displays the colors as swatches, which are small circles filled with the respective color. The user can click on a swatch to select that color.
It is most commonly used in admin tools to allow a business owner to select a color for a product or category.
Quick Start
- Installation
npm install @adaptavant/eds-core
- Import
import { ColorSwatches } from '@adaptavant/eds-core';
Size
Use the size
prop to set the diameter (in px) of each color swatch. The default is 32
.
const COLORS = [
'#1A1F23',
'#DA3A00',
'#FF8A35',
'#FFC700',
'#8849B1',
'#096CC3',
'#C5A981',
'#9C9C9C',
'#038F86',
'#26912A',
];
const [color, setColor] = React.useState('#096CC3');
return(
<ColorSwatches
colors={COLORS}
onChange={setColor}
value={color}
size="32"
/>
);
Number of rows
Use the rows
prop to set the number of rows for the color swatches. The default is 1
.
const COLORS = [
'#1A1F23',
'#DA3A00',
'#FF8A35',
'#FFC700',
'#8849B1',
'#096CC3',
'#C5A981',
'#9C9C9C',
'#038F86',
'#26912A',
];
const [color, setColor] = React.useState('#096CC3');
return(
<ColorSwatches
colors={COLORS}
onChange={setColor}
value={color}
rows={3}
/>
);
Custom Swatches
Use the customFirstSwatch
and customLastSwatch
props to add custom elements before/after the core list of options.
const COLORS = [
'#1A1F23',
'#DA3A00',
'#FF8A35',
'#FFC700',
'#8849B1',
'#096CC3',
'#C5A981',
'#9C9C9C',
'#038F86',
'#26912A',
];
const [color, setColor] = React.useState('#096CC3');
return(
<ColorSwatches
colors={COLORS}
inputName="color-picker"
size="24"
customFirstSwatch={
<ColorSwatch
background="#ABCABC"
classNames={{ swatchRing: 'border-2 border-dashed border-input-critical' }}
inputName="first"
onChange={setColor}
size="24"
value={color}
/>
}
onChange={setColor}
value={color}
/>
);
ColorSwatch
The ColorSwatch
component can used as a standalone primitive to build a color picker component, or to use for the customFirstSwatch
and customLastSwatch
swatches in the ColorSwatches
component. This component is internally used by ColorSwatches
component.
const [color, setColor] = React.useState('#5eb0f8');
return (
<>
<ColorSwatch
background="#3ead85"
onChange={setColor}
size="20"
value={color}
/>
<ColorSwatch
background="#5eb0f8"
onChange={setColor}
size="24"
value={color}
/>
<ColorSwatch
background="#512fb1"
onChange={setColor}
size="28"
value={color}
/>
<ColorSwatch
background="#ea556c"
onChange={setColor}
size="32"
value={color}
/>
<ColorSwatch
background="#ce3b93"
onChange={setColor}
size="36"
value={color}
/>
<ColorSwatch
background="#ce3b93"
onChange={setColor}
size="40"
value={color}
/>
</>
);
Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
ColorSwatch parts
{/* Styling the swatch and swatch ring parts */}
<ColorSwatch
background="#7298f8"
classNames={{
swatchRing: 'border-2 border-dotted border-[#7298f8] rounded-xl',
swatch: 'rounded-lg'
}}
value="#7298f8"
/>
Stylable Parts | Description |
---|---|
radio | The radio control of the swatch, not usually visible to the user. |
swatchRing | The focus/selected ring around the swatch. |
swatch | The swatch with backgound color. |