ColorPalette Edit

Props

The component accepts the following props.

{ colors, disableCustomColors = false, value, onChange, className, clearable = true }

Top ↑

colors

Array with the colors to be shown.

• Type: Array
• Required: Yes

Top ↑

disableCustomColors

Whether to allow custom color or not.

• Type: Boolean
• Required: No
• Default: false

Top ↑

value

currently active value

• Type: String
• Required: No

Top ↑

onChange

Callback called when a color is selected.

• Type: Function
• Required: Yes

Top ↑

className

classes to be applied to the container.

• Type: String
• Required: No

Top ↑

clearable

Whether the palette should have a clearing button or not.

• Type: Boolean
• Required: No
• Default: true

Top ↑

Usage

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.