ColorPalette
allows the user to pick a color from a list of pre-defined color entries.
import { ColorPalette } from '@wordpress/components';
import { useState } from '@wordpress/element';
const MyColorPalette = () => {
const [ color, setColor ] = useState ( '#f00' )
const colors = [
{ name: 'red', color: '#f00' },
{ name: 'white', color: '#fff' },
{ name: 'blue', color: '#00f' },
];
return (
<ColorPalette
colors={ colors }
value={ color }
onChange={ ( color ) => setColor( color ) }
/>
);
} );
If you're using this component outside the editor, you can
ensure Tooltip
positioning
for the ColorPalette
's color swatches, by rendering your ColorPalette
with a
Popover.Slot
further up the element tree and within a
SlotFillProvider
overall.
The component accepts the following props.
Whether the palette should have a clearing button.
- Required: No
- Default:
true
Array with the colors to be shown. When displaying multiple color palettes to choose from, the format of the array changes from an array of colors objects, to an array of color palettes.
- Required: No
- Default:
[]
Whether to allow the user to pick a custom color on top of the predefined
choices (defined via the colors
prop).
- Required: No
- Default:
false
This controls whether the alpha channel will be offered when selecting custom colors.
- Required: No
- Default:
false
The heading level.
- Required: No
- Default:
2
Currently active value.
- Required: No
Callback called when a color is selected.
- Required: Yes