Toolbar

A container for groups of tool buttons: role="toolbar" + aria-label, Tab enters and arrow keys move between buttons (roving tabindex — only the current item is focused).

Basic usage

Basic usage (native buttons)

Example

Combining with oas-button

Put oas-button elements in the slot (custom elements automatically join the roving behavior); use data-toolbar-ignore to exclude separators.

oas-button + separator

CutCopyPasteUndoRedo

Example

Disabled items

Buttons with disabled / aria-disabled are skipped by arrow-key navigation (roving skips them).

Disabled items

Example

API

Slots

Name	Description
default	—

• The host has role="toolbar"; aria-label comes from the locale key (toolbar.label, default 「工具栏」)
• Children that join roving: native controls (button/input/select/textarea/a[href]), interactive roles, custom elements (tag contains -); exclude them with data-toolbar-ignore or aria-hidden, and disabled/aria-disabled are skipped automatically
• Keyboard: Tab enters (only the current item is tab-reachable), ←/→ (or ↑/↓) moves between buttons, Home/End jumps to the first/last