ColorPaletteHandle

Updated on Feb 6, 2026

Represents the imperative handle exposed by the ColorPalette component through ref.

tsx

const paletteRef = useRef<ColorPaletteHandle>(null);

// Focus the palette programmatically
paletteRef.current?.focus();

// Access the wrapper element
const width = paletteRef.current?.wrapperRef.current?.offsetWidth;

<ColorPalette ref={paletteRef} palette="basic" />

Name	Type	Default	Description
focus	() => void		Programmatically focuses the ColorPalette component. When called: The root div element receives DOM focus The first color tile (or previously selected tile) is focused for keyboard navigation The component's onFocus callback is triggered
wrapperRef	RefObject<"null" | HTMLDivElement>		A React ref to the root wrapper element of the ColorPalette. This ref can be used to access the underlying DOM element for scenarios such as: Measuring the component dimensions Integrating with non-React libraries Programmatic scrolling or focus management The ref is populated after the component mounts and will be null before that.