Toolbar

SToolbar groups related actions (buttons, toggles) into a single panel with the toolbar role. Arrow keys move focus between the items (roving focus), so the whole panel takes one Tab stop. Separate groups with SSeparator.

Basic usage

<template>
  <SToolbar aria-label="Formatting">
    <SButton
      variant="ghost"
      size="sm"
    >
      Bold
    </SButton>
    <SButton
      variant="ghost"
      size="sm"
    >
      Italic
    </SButton>
    <SSeparator
      orientation="vertical"
      style="height: 20px"
    />
    <SButton
      variant="ghost"
      size="sm"
    >
      Link
    </SButton>
  </SToolbar>
</template>

Vertical toolbar

<template>
  <SToolbar
    orientation="vertical"
    aria-label="Tools"
  >
    <SButton
      variant="ghost"
      size="sm"
    >
      Select
    </SButton>
    <SButton
      variant="ghost"
      size="sm"
    >
      Brush
    </SButton>
    <SButton
      variant="ghost"
      size="sm"
    >
      Eraser
    </SButton>
  </SToolbar>
</template>

Elevation

The toolbar sits at the first elevation level. flat presses it to the page, elevation raises it higher — see Elevation.

<template>
  <SToolbar flat>
    <SButton
      variant="ghost"
      icon="pencil"
      aria-label="Edit"
    />
  </SToolbar>
</template>

API

Props

Name	Type	Default	Description
orientation	"vertical" | "horizontal"	"horizontal"	Toolbar orientation. It sets the layout and the direction of arrow key navigation.
square	boolean	undefined	Square corners: removes the border radius (rounded by default).
loop	boolean	true	Loops arrow key navigation (from the last item to the first and back).
aria-label	string	undefined	Accessible name of the toolbar (for screen readers).
flat	boolean	undefined	Removes the shadow. Overridden by the elevation prop when it is set.
elevation	0 | 1 | 2 | 3 | 4 | 5	undefined	Shadow level 0–5 (scale); 0 means no shadow. Overrides flat.

Slots

Name	Description
default	Toolbar actions: buttons (SButton), toggles, separators (SSeparator).