Actions

ToggleGroup and Toolbar

Toggle buttons where one or several can be on, and a toolbar that is one Tab stop with arrow keys inside.

Ant Design: Segmented (multiple)

import { ToggleGroup, Toolbar } from '@alea/ui';

Examples

One Tab stop; arrows move. Bold, italic and underline toggle independently, alignment is one of three.

A view switcher with icons and words.

A set of toggle buttons, one or several on: bold/italic, view modes, filters (Radix ToggleGroup, MUI ToggleButtonGroup).

Prop	Type	Default	Description
`aria-label`required	`string`	-	What the group controls, for screen readers ("Text style").
`items`required	`{ id: Key; label: string; icon?: ReactNode; isDisabled?: boolean \| undefined; }[]`	-	Buttons: id, label, and an icon. With iconOnly the label becomes the accessible name.
`className`	`string`	-	Extra class names for the root element.
`defaultValue`	`Key[]`	-	The pressed ids to start with.
`iconOnly`	`boolean`	-	Show only the icons.
`onChange`	`((keys: Key[]) => void)`	-	Called with the pressed ids.
`selectionMode`	`"single" \| "multiple"`	`'single'`	single (like radio buttons) or multiple (like checkboxes). Default single.
`size`	`"sm" \| "md"`	`'md'`	sm (26 px) or md (32 px, default).
`value`	`Key[]`	-	The pressed ids (controlled).

A row of controls that is one Tab stop; arrow keys move inside it (editor toolbars, table tools).

Prop	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element. (React Aria)
`children`	`ChildrenOrFunction<DisclosureGroupRenderProps>`	-	The children of the component. A function may be provided to alter the children based on component state. (React Aria)
`className`	`ClassNameOrFunction<ToolbarRenderProps>`	-	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. (React Aria)
`orientation`	`"horizontal" \| "vertical"`	-	The orientation of the entire toolbar. (React Aria)
`style`	`StyleOrFunction<DisclosureGroupRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. (React Aria)

Key	Does
`Tab`	Enters and leaves the toolbar
`Arrow Left` / `Right`	Move between controls
`Space` or `Enter`	Toggles

Use single for exclusive options (alignment) and multiple for independent ones (bold, italic).
Give icon-only toggles labels.

Don't