StellarUI

<stellar-toolbar>

Accessible toolbar wrapper with roving tab index behavior for descendant buttons and button groups.

Properties

Preview

Undo

Redo

New

Bold

Italic

Underline

Markup

Copy

<stellar-toolbar>
  <stellar-button-group>
    <stellar-button appearance="ghost" icon="mdi:arrow-u-left-top">Undo</stellar-button>
    <stellar-button appearance="ghost" icon="mdi:arrow-u-right-top">Redo</stellar-button>
  </stellar-button-group>
  <stellar-button tone="primary" icon="mdi:plus">New</stellar-button>
  <stellar-button-group>
    <stellar-button appearance="ghost" icon="mdi:format-bold">Bold</stellar-button>
    <stellar-button appearance="ghost" icon="mdi:format-italic">Italic</stellar-button>
    <stellar-button appearance="ghost" icon="mdi:format-underline">Underline</stellar-button>
  </stellar-button-group>
  <stellar-button appearance="ghost" icon="mdi:printer-outline">Print</stellar-button>
</stellar-toolbar>

API

Complete props, events, slots, and implementation notes for the shipped toolbar.

Props

Prop	Type	Default	Notes
`orientation`	`horizontal \| vertical`	`horizontal`	Changes which arrow keys move the active roving tab stop and pushes the same orientation onto descendant `stellar-button-group` wrappers.

Events

Event	Source	Notes
slotted button events	slotted content	Clicks and focus events stay on the authored `stellar-button` children. The toolbar only manages the roving tab index.
custom events	none	`stellar-toolbar` does not emit custom events.

Slots

Slot	Notes
default	Author direct `stellar-button`, `stellar-button-group`, or dropdown trigger content. The toolbar scans descendant buttons and manages focus across them.

Notes

`stellar-toolbar` follows the ARIA toolbar pattern with a roving tab index, so keyboard users tab into the toolbar once and then use arrow keys to move across actions.
Horizontal toolbars use Left and Right, while `orientation="vertical"` switches navigation to Up and Down. Home and End jump to the first and last enabled buttons.
Pointer interaction updates the active roving tab stop to the clicked button, matching the next Tab entry point.
Descendant `stellar-button-group` wrappers automatically inherit the toolbar orientation so joined button stacks stay aligned with the keyboard direction.
The toolbar itself stays structural. Author normal `stellar-button` children and let those controls keep their own click, disabled, and link semantics.