ColorDot
A small round swatch that opens buttery's color picker in a popover to choose any color.
import { ColorDot } from "@butteryui/react";Demo
When to use it
Use it for
- Choosing any color in a row of controls, such as a gradient's two stops or a solid fill
Not for
- Picking from presets: use SwatchGrid
- A picker that stays open: use ColorPicker
Examples
Accent color
A dot that keeps its own color and opens the picker with presets, reporting each color it settles on once.
Saved #2563eb
Gradient stops
A gradient's two stops and a swap button, 6px apart as in an inspector row.
#a5b4fc to #f0abfc
Solid fill
One fill kept in state as #rrggbb, changed by the picker's hex code field or its area and hue.
#a5b4fc
Variants and states
A gradient's colors
Two dots 6px apart with a button that swaps them. Each opens buttery's color picker in a popover.
Disabled
Props
ColorDot
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | string | What the color is for, such as "First hue". It names the dot and its picker. | |
value | string | The color, as #rrggbb. Pair with onValueChange to control it. | |
defaultValue | string | The color at first when uncontrolled, as #rrggbb. Defaults to black. | |
onValueChange | ((value: string) => void) | Called with each change in the picker, as #rrggbb, every frame of a drag included. | |
onValueCommit | ((value: string) => void) | Called when a drag in the picker ends, or a key, a typed code or a preset changes the color: one undo step per change rather than per frame. | |
open | boolean | Whether the picker is open. Pair with onOpenChange to control it. | |
defaultOpen | boolean | false | Whether the picker starts open when uncontrolled. Defaults to false. |
onOpenChange | ((open: boolean) => void) | Called when the picker opens or closes. | |
presets | readonly string[] | Colors to pick in one press, as #rrggbb, shown in the picker under its code field. | |
labels | Partial<ColorPickerLabels> | Words for the picker to use instead of the English ones. |
It also takes Omit<ComponentPropsWithRef<"button">, "value" | "defaultValue" | "onChange" | "children">.
ColorPickerLabels
The words a `ColorPicker` reads out, for other languages.
| Field | Type | Default | Description |
|---|---|---|---|
saturationrequired | string | Names the area's left-and-right control. | |
brightnessrequired | string | Names the area's up-and-down control. | |
huerequired | string | Names the hue track. | |
coderequired | string | Names the hex code field. | |
presetsrequired | string | Names the presets. | |
hintrequired | string | Says how to use the area with the keyboard. |
Accessibility
A button named by its label and color ("First hue, #a5b4fc"); the 28px circle around the dot takes the press. Enter, Space or a press opens a popover named by the label holding a ColorPicker, with focus on its saturation slider; Escape or a press outside closes it and focus goes back to the dot. In the code field, the first Escape puts back an unsaved code and the second closes.
| Keys | What they do |
|---|---|
| Enter or Space | Opens the picker, with focus on its saturation slider |
| Escape | Closes the picker and puts focus back on the dot; in the code field, the first Escape puts back an unsaved code |
Motion
It appears with a `Presence` preset and leaves faster than it came, in about 60% of the time.
With reduced motion: Its popover fades in and out over 100ms without growing, and the picker's thumbs land at once when a code or preset changes the color.
Layout
A 24px round dot that keeps its size in any row, with a 28px circle around it taking the press. The picker opens in a popover 8px beside it, with 12px of padding around the ColorPicker.