Chroma Panel

Search documentation

Find a page or section

ModeToolbar

The mode switcher, as a tablist with a roving tab stop.

Anatomy

import { ModeToolbar } from "chroma-panel";

Only inside a panel

This is one of the parts the built-in modes are made of. It reads the colour through usePanel(), so it only works inside a ChromaPanel — typically in a custom mode. For a picker outside the panel, use the store and hooks.

API reference

Props

PropTypeDefaultDescription
modes*PickerMode[]The modes to show, in tab order.
activeId*stringId of the mode currently open.
onSelect*(id: string) => voidFires with the id of the mode chosen.