Toolbar

Horizontal

Vertical

A separator follows its toolbar, so inside a vertical toolbar it is a rule across the bar without any prop.

Wrapping

A horizontal toolbar that does not fit its container flows onto more rows and grows taller. Nothing is hidden and nothing scrolls, so every action stays reachable and the toolbar never widens the page. One row of standard buttons is still exactly 40px tall; arrow keys follow reading order across rows. A separator can end a row.

Hosts with a fixed-height header row need room for a second row, or a flex-nowrap class on the toolbar and a scroll region of their own.

Props

ToolbarSeparator's orientation names the axis of the toolbar it is in, which is the opposite of Divider's orientation (the rule's own direction). It follows its Toolbar when omitted.

Accessibility

• Name the toolbar with ariaLabel or aria-label, or point aria-labelledby at a visible heading. A toolbar given none of them is called "Toolbar".
• One Tab stop; Arrow keys move between focusable children, in reading order when the toolbar wraps.
• Buttons, button groups, badges, toggles and copy actions can sit in a toolbar.
• So can a confirmation, a menu and a tooltip. Each puts one control in the bar and draws the rest outside it, so the arrow keys still move from control to control.
• A ToolbarSeparator is a separator with the orientation of the rule it draws.

Manifest entry

<Toolbar ariaLabel="Track actions">
  <Button>ZOOM</Button>
  <ToolbarSeparator />
  <Button>RESET</Button>
</Toolbar>

{
  "description": "Horizontal or vertical action bar with roving-tabindex arrow-key navigation over its focusable children. A horizontal toolbar that does not fit wraps onto more rows and grows taller, so no action is hidden; arrow keys follow reading order across rows. A vertical toolbar stacks.",
  "props": {
    "orientation": {
      "type": "enum",
      "values": [
        "horizontal",
        "vertical"
      ],
      "default": "horizontal"
    },
    "ariaLabel": {
      "type": "string",
      "description": "The toolbar's accessible name (native aria-label works too). With aria-labelledby and no label the toolbar is named by that element; a toolbar given neither is called Toolbar."
    }
  },
  "slots": {
    "children": {
      "type": "Button | ButtonGroup | Badge | Toggle | CopyButton | ConfirmDialog | DropdownMenu | Tooltip | ToolbarSeparator",
      "required": true
    }
  },
  "composable_with": [
    "Button",
    "ButtonGroup",
    "Badge",
    "Toggle",
    "CopyButton",
    "ConfirmDialog",
    "DropdownMenu",
    "Tooltip",
    "ToolbarSeparator"
  ],
  "never_inside": [
    "Toolbar"
  ],
  "example": "<Toolbar ariaLabel=\"Track actions\">\n  <Button>ZOOM</Button>\n  <ToolbarSeparator />\n  <Button>RESET</Button>\n</Toolbar>"
}