colorpicker

active
Not required
bool
hex
Not required
string
hsl
Not required
object
oldHue
Not required
number
onChange
Not required
func
onClose
Not required
func
anchor
Not required
("left" | "right")
variant
Not required
("dark")
position
Not required
("absolute" | "relative")
"absolute"
standalone
Not required
bool
true
hexInput
Not required
bool
true
transparency
Not required
bool
false
savedColors
Not required
shape
children
Not required
arrayOf/node

A comprehensive color picker component with support for saved colors, transparency, and various input methods.

<ColorPicker/> component

Our standard color picker.

Our standard color picker, without hex

Our standard color picker, with transparent option

Saved colors toolbar

When provided, the savedColors prop on the ColorPicker element should be shaped as the following

KeyTypeRequiredPurpose
colorsarraynocolors that should be saved
handleColorSelectfunctionnoadditional callback for color tile click, calls onChange behavior of ColorPicker component when implemented here
handleColorsEditfunctionyescallback for settings button click
with colors saved to account settings
without colors saved to account settings (empty state)

<ColorInput /> Component

Our standard Color Input.

Our standard Color Input with a label

Our standard Color Input with transparency.

Color Input with saved colors

This color input includes the ColorsUpdaterToolbar component, introduced for the Saved Colors feature.