Toolbar

Installation

npx @yolkui/cli add toolbar

Variants

By default the toolbar has no surface of its own, so it sits in a card header or an editor's frame. variant="outline" draws the bar with the outline Button's edge; variant="soft" raises it, for a toolbar that floats over content. The items stay the same in all three. A toolbar wider than its container never wraps: it scrolls sideways, with no scrollbar, and fades out at each edge that hides items; the focused item is kept in view.

Vertical

orientation="vertical" stacks the items, and the arrow keys go up and down. In a container with a height (a full-height side rail) it scrolls up and down when the items do not fit, with a fade at the top and bottom. size sets the size of every item: Button's 28 · 32 · 36 · 40. A ToolbarButton or ToolbarLink with size="icon" is the square icon-only button of the toolbar's size; a toggle group takes the toolbar's orientation.

Disabled

A disabled item fades and does nothing, but stays in the arrow-key order and keeps pointer events, so a Tooltip around it can say why.

Accessibility

Tab enters the toolbar once, and the arrow keys move across every item, the toggle groups' and links included; Home and End go to the ends, and Tab again leaves it. Screen readers hear the toolbar's name, then each item.

• Name the toolbar with aria-label, e.g. "Text formatting"; a development warning says when it has none.
• Naming each toggle group ("Style", "Alignment") helps a screen reader say where focus is; give every icon-only item an aria-label.
• Use ToolbarLink for a link, so it joins the arrow-key order; a plain <a> inside would be a second tab stop.
• Use a toolbar for three or more controls; for two or three toggles alone, a ToggleGroup is enough.