Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Toolbar

    A row of related controls with a single tab stop, moved through with the arrow keys.

    Storybook
    Storybook
    Source
    Source

    Role and semantics

    Section titled “Role and semantics”

    Toolbar is drawn with Base UI Toolbar: the container carries role="toolbar" and aria-orientation; its name comes from label, required at type level. ToolbarGroup is role="group" and ToolbarSeparator is role="separator". Buttons with pressed are announced as toggle buttons through aria-pressed. Icon-only buttons are named by label; icons carry aria-hidden.

    Keyboard

    Section titled “Keyboard”
    Key Behaviour
    Tab Enters the toolbar; a second Tab leaves it.
    Left and right arrow In a horizontal toolbar moves to the previous and next button, wrapping at the end.
    Up and down arrow Does the same in a vertical toolbar.
    Enter or Space Runs the button or toggles it.

    Disabled buttons are focused with the arrow keys but do not run. In right-to-left languages Provider direction="rtl" reverses the horizontal arrows.

    Focus

    Section titled “Focus”

    The toolbar has a single tab stop and remembers the last focused button. The focused button shows a 2 px color-focus-ring ring on keyboard focus only.

    Screen reader output

    Section titled “Screen reader output”
    Example Read as
    Entering the toolbar “Text format, toolbar, Style, group, Bold, toggle button, pressed”
    Moving with an arrow key “Italic, toggle button, not pressed”
    Disabled button “Download, button, dimmed”

    Contrast

    Section titled “Contrast”

    Labels and icons keep at least 4.5:1 on the background; the container border and separator are decorative. The on state is not shown by colour alone: aria-pressed tells screen readers and the selected fill shows it visually. The disabled state is exempt (WCAG 1.4.3).

    WCAG 2.2

    Section titled “WCAG 2.2”
    Criterion How Toolbar meets it What the product team must do
    1.3.1 Info and relationships toolbar, group and separator roles. Group related buttons with ToolbarGroup.
    2.1.1 Keyboard Arrow keys, Enter and Space. Do not add your own key handlers.
    2.4.3 Focus order A single tab stop that remembers its place. Place the toolbar near the area it acts on.
    2.4.7 Focus visible focus-visible ring. Do not remove the ring.
    2.5.8 Target size (minimum) The smallest button is 32 × 32 px. Use md on touch screens.
    4.1.2 Name, role, value The name comes from label, the toggle state from aria-pressed. Give icon-only buttons a meaningful label.