Toolbar

A container component that groups and manages a set of controls such as buttons, or toggle groups. Implements proper keyboard navigation and ARIA attributes to ensure accessibility when working with grouped controls.

Full keyboard navigation

Architecture

so-toolbar
Slot: defaultHere you can place so-toggle-groups, so-separators and any interactive elements like buttons or links.
so-toolbar-separator

Reference

  • Toolbar

    The root container that manages the state and behavior of the toolbar system. Coordinates keyboard interactions and focus management between the grouped controls.

    • Attributes

      • aria-label
        string
        /
        default: -

        Accessible label for the toolbar when a visible label is not present. Essential for proper screen reader identification.

  • Separator

    A visual divider that creates separation between groups of controls within the toolbar. Helps organize and structure the toolbar's content for better visual hierarchy.

Keyboard

  • Tab

    Moves focus to the first focusable control in the toolbar.

  • Space

    When focus is on a control, activates or triggers the focused control.

  • Enter

    When focus is on a control, activates or triggers the focused control.

  • Moves focus to the next control. When focus is on the last control, moves to the first control.

  • Moves focus to the previous control. When focus is on the first control, moves to the last control.

  • Home

    Moves focus to the first control in the toolbar.

  • End

    Moves focus to the last control in the toolbar.

made for toddle