toolbar

33 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Toolbar ArrowUp key interaction

Pressing ArrowUp moves focus to the previous item depending on the toolbar's orientation.

Toolbar ArrowLeft key interaction

Pressing ArrowLeft moves focus to the previous item depending on the toolbar's orientation.

Toolbar Home key interaction

Pressing Home moves focus to the first item in the toolbar.

Toolbar End key interaction

Pressing End moves focus to the last item in the toolbar.

Toolbar Root asChild prop

The Root component accepts an asChild prop (boolean, default false) that changes the default rendered element for the one passed as a child, merging their props and behavior.

Toolbar Root orientation prop

The Root component accepts an orientation prop (string, default "horizontal") that accepts "horizontal", "vertical", or undefined to control the orientation of the toolbar.

Toolbar Root dir prop

The Root component accepts a dir prop (string, enum "ltr" | "rtl") that sets the reading direction of the toolbar. If omitted, it inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.

Toolbar Root loop prop

The Root component accepts a loop prop (boolean, default true) that controls keyboard navigation. When true, keyboard navigation will loop from last tab to first, and vice versa.

Toolbar Root data-orientation attribute

The Root component renders a [data-orientation] attribute with values "vertical" or "horizontal" reflecting the current orientation.

Toolbar Button asChild prop

The Button component accepts an asChild prop (boolean, default false) that changes the default rendered element for the one passed as a child, merging their props and behavior.

Toolbar Button data-orientation attribute

The Button component renders a [data-orientation] attribute with values "vertical" or "horizontal" reflecting the toolbar's current orientation.

Toolbar Link asChild prop

The Link component accepts an asChild prop (boolean, default false) that changes the default rendered element for the one passed as a child, merging their props and behavior.

Toolbar ToggleGroup type prop required

The ToggleGroup component requires a type prop (string, enum "single" | "multiple") that determines whether a single or multiple items can be pressed at a time.

Toolbar ToggleGroup single type value prop

When ToggleGroup type is "single", the component accepts a value prop (string) for the controlled value of the pressed item. Must be used in conjunction with onValueChange.

Toolbar ToggleGroup multiple type value prop

When ToggleGroup type is "multiple", the component accepts a value prop (string[], default []) for the controlled value of the pressed items. Must be used in conjunction with onValueChange.

Toolbar ToggleGroup multiple type defaultValue prop

When ToggleGroup type is "multiple", the component accepts a defaultValue prop (string[], default []) that shows the initial pressed items when initially rendered. Use when you do not need to control the state of the items.

Toolbar ToggleGroup multiple type onValueChange

When ToggleGroup type is "multiple", the component accepts an onValueChange prop (function: (value: string[]) => void) that is called when the pressed state of an item changes.

Toolbar ToggleGroup disabled prop

The ToggleGroup component accepts a disabled prop (boolean, default false) that when true, prevents the user from interacting with the toggle group and all its items.

Toolbar ToggleItem value prop required

The ToggleItem component requires a value prop (string) that is a unique value for the item.

Toolbar ToggleItem disabled prop

The ToggleItem component accepts a disabled prop (boolean) that when true, prevents the user from interacting with the item.

Toolbar ToggleItem asChild prop

The ToggleItem component accepts an asChild prop (boolean, default false) that changes the default rendered element for the one passed as a child, merging their props and behavior.

Toolbar ToggleItem data-state attribute

The ToggleItem component renders a [data-state] attribute with values "on" or "off" reflecting the current state of the item.

Toolbar ToggleItem data-disabled attribute

The ToggleItem component renders a [data-disabled] attribute that is present when the item is disabled.

Toolbar ToggleItem data-orientation attribute

The ToggleItem component renders a [data-orientation] attribute with values "vertical" or "horizontal" reflecting the toolbar's current orientation.

Toolbar Separator asChild prop

The Separator component accepts an asChild prop (boolean, default false) that changes the default rendered element for the one passed as a child, merging their props and behavior.

Toolbar Separator data-orientation attribute

The Separator component renders a [data-orientation] attribute with values "vertical" or "horizontal" reflecting the toolbar's current orientation.

Toolbar composition with other primitives

All Radix primitives which expose a Trigger part, such as Dialog, AlertDialog, Popover, and DropdownMenu can be composed within a toolbar by using the asChild prop on the Toolbar.Button component wrapping the Trigger.

Toolbar focus management uses roving tabindex

Toolbar uses roving tabindex to manage focus movement among items, as per WAI-ARIA practices.

Toolbar Tab key interaction

Pressing Tab moves focus to the first item in the toolbar group.

Toolbar Space and Enter key interaction

Pressing Space or Enter activates or deactivates the focused item in the toolbar.

Toolbar ArrowDown key interaction

Pressing ArrowDown moves focus to the next item depending on the toolbar's orientation.

Toolbar anatomy structure

Toolbar consists of Root (contains all toolbar parts), Button (button item), Link (link item), Separator (visually separates items), ToggleGroup (set of two-state buttons), and ToggleItem (item in the group).

Toolbar DropdownMenu composition example

A DropdownMenu can be composed in a Toolbar by wrapping DropdownMenu.Trigger with Toolbar.Button using asChild: <Toolbar.Root><Toolbar.Button><DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger></Toolbar.Button><DropdownMenu.Content>…</DropdownMenu.Content></Toolbar.Root>

Give your agent this brain