ColorPicker

Pick hex colours, with an optional alpha channel, from a popover swatch.

ColorPicker is a client component that renders a react-colorful hex picker inside Reactberry's Popover, so it inherits click-outside, positioning and animation behaviour. Use it for theme, label and brand colour settings.

#3b82f6

Import#

typescript

import { ColorPicker } from "@reactberry/system/blocks";

Usage#

typescript

import { useState } from "react";
import { ColorPicker } from "@reactberry/system/blocks";

export default function LabelColor() {
  const [color, setColor] = useState("#3b82f6");

  return <ColorPicker color={color} onChange={setColor} alpha={false} />;
}

Examples#

Alpha channel#

alpha defaults to true, which adds an alpha slider and produces #RRGGBBAA values.

#10b98180

Custom trigger#

Pass trigger to replace the default swatch, for example inside a settings row. It is still wrapped in the popover's trigger button.

Accent colour

Disabled#

disabled disables the trigger button and dims the default swatch. swatchSize sets the swatch's edge length.

Brand colour is locked on the Starter plan

API#

ColorPicker#

Prop	Type	Default	Description
`color*`	`string`	—	Current colour value in hex form (`#RRGGBB` or, with `alpha`, `#RRGGBBAA`).
`onChange*`	`(color: string) => void`	—	Fired whenever the user picks a new colour.
`alpha`	`boolean`	`true`	Show the alpha-channel slider; defaults to `true`.
`trigger`	`ReactNode`	—	Custom trigger. When omitted, a coloured swatch button is rendered.
`placement`	`string`	`bottom end`	Side of the trigger the picker pops out from, e.g. `"bottom start"` or `"bottom-start"`.
`swatchSize`	`string`	`2rem`	Edge length of the default swatch trigger.
`disabled`	`boolean`	`false`	Disable the trigger button, including a custom `trigger`. The default swatch is also dimmed.
`panelProps`	`any`	—	Forwarded to the underlying `Popover` panel.
`triggerProps`	`any`	—	Forwarded to the underlying `Popover` trigger button.
`containerProps`	`any`	—	Forwarded to the underlying `Popover` container.

triggerProps are spread after the defaults ($size="none", variant="ghost", p="0", disabled and aria-label="Pick a color"), so they can override them. panelProps are spread after width="auto" and p="xs".

Accessibility#

The trigger is a Headless UI PopoverButton rendered as a Reactberry Button, with aria-label="Pick a color" by default. Override it with triggerProps={{ "aria-label": "..." }}.
disabled sets the disabled attribute on the trigger button, including when a custom trigger is used.
The default swatch shows the colour over a checkerboard so transparent values stay visible.

Notes#

The picker is controlled: it always shows color, and onChange receives the new hex string.
alpha={false} renders HexColorPicker; otherwise HexAlphaColorPicker is used.
Don't put a button inside a custom trigger, because the trigger is already a button.
The panel is positioned absolutely, not in a portal, so it can be clipped by an ancestor with overflow: hidden.