# ColorPalette

**Kind:** Class

A color selection component. Accepts a list of `allowedColors` to be displayed
as selectable color squares.

[[ Story id="colorpalette--example" title="Color palette example" ]]

---

## ColorPaletteSynced

**Kind:** Class

A wrapper around the `ColorPalette` component that syncs with `GlobalConfig`.

[[ Story id="colorpalette--synced-example" title="Synced color palette example" ]]

---

## ColorPaletteProps

**Kind:** Interface

Props for the `ColorPalette` component. Also accepts:
* `ColorPaletteStyleProps`

### Properties

#### `allowedColors`

Type: `Array<string>`

The list of `colors` to display in the color palette.

#### `className?`

Type: `undefined | string`

Additional class names to apply to the color palette, separated by spaces.

#### `color?`

Type: `string | null`

The current selected `Color` option.

#### `disabled?`

Type: `undefined | false | true`

If set to `true`, the color palette will not allow color selection.

#### `onChange?`

Type: `undefined | object`

A function to be called when the selected color changes.

#### `squareMargin?`

Type: `undefined | number`

The margin between color squares in the color palette.

#### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the color palette.

---

## ColorPaletteSyncedProps

**Kind:** Interface

Props for the `ColorPaletteSynced` component. Also accepts:
* `ColorPaletteStyleProps`

### Properties

#### `allowedColors`

Type: `Array<string>`

The list of `colors` to display in the color palette.

#### `className?`

Type: `undefined | string`

Additional class names to apply to the color palette, separated by spaces.

#### `disabled?`

Type: `undefined | false | true`

If set to `true`, the color palette will not allow color selection.

#### `globalConfigKey`

Type: `GlobalConfigKey`

A string key or array key path in `GlobalConfig`. The selected color will always reflect the value stored in `GlobalConfig` for this key. Selecting a new color will update `GlobalConfig`.

#### `onChange?`

Type: `undefined | object`

A function to be called when the selected color changes.

#### `squareMargin?`

Type: `undefined | number`

The margin between color squares in the color palette.

#### `style?`

Type: `React.CSSProperties`

Additional styles to apply to the color palette.