Tool bar

A responsive container that groups buttons and menus, and automatically moves items into an overflow menu when space is limited.

Usage

Code

Accessibility

Duplicate

Reorder

Export

Rename lesson

Delete lesson

<sl-tool-bar contained aria-label="Lesson builder">
  <sl-button fill="outline">
    <sl-icon name="far-copy"></sl-icon>
    Duplicate
  </sl-button>
  <sl-button fill="outline">
    <sl-icon name="far-arrow-down-wide-short"></sl-icon>
    Reorder
  </sl-button>
  <sl-tool-bar-divider></sl-tool-bar-divider>
  <sl-button fill="outline">
    <sl-icon name="far-arrow-up-from-bracket"></sl-icon>
    Export
  </sl-button>
  <sl-menu-button fill="outline">
    <div slot="button">More</div>
    <sl-menu-item>
      <sl-icon name="far-pen"></sl-icon>
      Rename lesson
    </sl-menu-item>
    <sl-menu-item>
      <sl-icon name="far-trash"></sl-icon>
      Delete lesson
    </sl-menu-item>
  </sl-menu-button>
</sl-tool-bar>

Use to place actions close to the content or region they affect (for example, controls for a list, table, editor, or card). It works best for a consistent action set for that view (for example, filter, sort, export, edit, insert actions). Use dividers to separate groups (for example, “view”, “manage”, “format”) so users can scan quickly.

Bulk Actions

Use to expose actions that apply to multiple items at once (for example, “Move”, “Delete”, “Assign”, “Export”) when the user selects one or more items in a list or table. Keep the most important bulk actions visible and move the rest into overflow.

Action density

Use when the same set of actions must remain available across different widths. Overflow keeps the layout stable while ensuring secondary actions stay accessible.

When not to use

Too Many Actions

If you have a long list of actions, or actions that are infrequent and not tied to the current view/content, avoid a toolbar. Move actions into a more suitable pattern (context menus, inline actions, progressive disclosure) or place them in a more global location (page header, navigation, or settings) so the toolbar stays scannable and purposeful.

Don’t use the toolbar for navigation between pages/sections or as the primary control in multi-step flows. If you only need a small set of primary actions (especially in step-by-step layouts), consider using a Button Bar instead.

Anatomy

Item	Name	Description	Optional
1	Container	Wraps all actions and defines layout, spacing, and optional surface (contained).	no
2	Item	A single action element placed in the toolbar (button, menu button, or buttons group).	no
3	Divider	A visual separator between groups; also becomes a separator inside overflow.	yes
4	Overflow trigger	A “more actions” control that appears when items don’t fit.	no
5	Overflow menu	The menu that contains hidden actions (keeps order and group separation).	no

Variants

These options change the toolbar’s appearance so it stays clear and readable across different surfaces and action styles.

Fill: Controls the look of the actions inside the toolbar. Use Outline when actions need stronger emphasis and clearer boundaries, or use Ghost when actions should feel lighter and blend into the interface.
Inverted: Switches the toolbar styling for dark or inverted surfaces. Use it to maintain contrast and readability when the toolbar sits on a darker background.
Contained: Adds a surface around the toolbar (background and padding). Use it to visually separate the toolbar from surrounding content or to make it feel like a distinct control area.

States

These states describe what users see when the toolbar is available, constrained, or unavailable.

Default: Actions are available and visible until overflow is needed.
Overflow: Some actions move into the overflow menu when space is limited.
Disabled: The toolbar and its actions are not interactive.

Figma Properties

With these options you can adjust the appearance of the toolbar in Figma.

Properties for the main toolbar component used by designers. Some options (like Overflow, Item 3–5, and Divider 1–5) are for previewing compositions and states in Figma.

Item	Options	Description
Fill	`Ghost` `Outline`	Sets the visual style applied to actions inside the toolbar.
Inverted	`boolean`	Switches the toolbar to an inverted appearance for dark surfaces.
Contained	`boolean`	Adds a surface treatment (background and padding) around the toolbar.
Overflow	`boolean`	Preview-only toggle to show the overflow state in Figma.
Item 3–5	`boolean`	Preview-only toggles to add/remove extra items in the Figma example.
Divider 1–5	`boolean`	Preview-only toggles to add/remove dividers between groups in the Figma example.

Properties for the nested toolbar item used inside the toolbar to swap between the supported control types.

Item	Options	Description
Item	`Button` `Menu` `Button Group`	Swaps the supported action type used for a single toolbar item.
Fill	`Outline` `Ghost`	Matches the item’s style to the toolbar style where needed.
Inverted	`boolean`	Matches the item’s appearance to inverted surfaces where needed.

Properties for the nested toolbar group used inside a toolbar item to build grouped actions and preview the group overflow behaviour.

Item	Options	Description
Overflow	`boolean`	Switches a button group between expanded buttons and a collapsed menu-style version.
Inverted	`boolean`	Matches the group appearance to inverted surfaces where needed.
Button 3–5	`boolean`	Preview-only toggles to control how many grouped actions are shown in the example.

Behaviours

Controls are organised into logical groups to improve scannability and usability. When space is limited, groups help determine how items collapse into the overflow menu. Dividers should only be used to separate meaningful groups. Avoid using dividers between every item.

Handles overflow

When space is limited, especially on smaller screens, actions move into the overflow menu, while the remaining actions will stay visible. In the overflow dropdown, groups are separated with dividers to preserve structure and clarity.

Consistent styling and clear icon actions

The toolbar applies a consistent visual style across its items (for example, matching fill and inverted appearance) so actions look like part of the same system. If you use icon-only actions, ensure they remain understandable through labels and/or tooltips, and avoid placing many icon-only actions without strong familiarity or supporting text.

Bold

Italic

Underline

Cut

Copy

Paste

Insert

Special character

Page break

<sl-tool-bar aria-label="Essay editor">
  <sl-button fill="outline">
    <sl-icon name="far-bold"></sl-icon>
    Bold
  </sl-button>
  <sl-button fill="outline">
    <sl-icon name="far-italic"></sl-icon>
    Italic
  </sl-button>
  <sl-button fill="outline">
    <sl-icon name="far-underline"></sl-icon>
    Underline
  </sl-button>
  <sl-tool-bar-divider></sl-tool-bar-divider>
  <sl-button fill="outline">
    <sl-icon name="far-scissors"></sl-icon>
    Cut
  </sl-button>
  <sl-button fill="outline">
    <sl-icon name="far-copy"></sl-icon>
    Copy
  </sl-button>
  <sl-button fill="outline">
    <sl-icon name="far-paste"></sl-icon>
    Paste
  </sl-button>
  <sl-tool-bar-divider></sl-tool-bar-divider>
  <sl-menu-button fill="outline">
    <div slot="button">Insert</div>
    <sl-menu-item>
      <sl-icon name="far-font"></sl-icon>
      Special character
    </sl-menu-item>
    <sl-menu-item>
      <sl-icon name="far-arrow-turn-left-down"></sl-icon>
      Page break
    </sl-menu-item>
  </sl-menu-button>
</sl-tool-bar>

Tool bar divider API

A visual separator used to group related items within the tool bar.

Properties

Name	Attribute	Type	Default	Description
`inverted`	`inverted`	`boolean \| undefined`		Set this to true to invert the color of the divider. This should be used when the tool-bar is displayed on a dark background.

Tool bar API

A responsive container that groups buttons and menus. It automatically moves items into an overflow menu when space is limited.

Properties

Name	Attribute	Type	Default	Description
`align`	`align`	`'start' \| 'end' \| undefined`	`'start'`	The horizontal alignment within the tool-bar.
`contained`	`contained`	`boolean \| undefined`	`false`	If `true`, the tool-bar will have a border (when there is no inverted set) and padding around it. Use this when you want the tool-bar to be visually distinct from surrounding content.
`disabled`	`disabled`	`boolean \| undefined`	`false`	If true, the tool-bar is disabled and cannot be interacted with.
`fill`	`fill`	`'solid' \| 'outline' \| 'link' \| 'ghost' \| undefined`	`'solid'`	The fill of buttons and menu buttons (also overflow menu button).
`inverted`	`inverted`	`boolean \| undefined`	`false`	Use this if you want the menu button that appears when the tool bar overflows to use the "inverted" variant. This also overrides all slotted button and menu-button variants to `inverted` when set.

Methods

Name Parameters Return Description

focus void Delegate focus to the roving tabindex controller so the first focusable item receives focus.

refresh void Re-maps slotted elements, measures their widths, and recalculates which items are visible vs. moved into the overflow menu. Called automatically on slot changes and DOM mutations, but you may need to call it manually when using nested slots (which don't trigger slotchange or MutationObserver).

Name	Return	Description
`focus`	`void`	Delegate focus to the roving tabindex controller so the first focusable item receives focus.
`refresh`	`void`	Re-maps slotted elements, measures their widths, and recalculates which items are visible vs. moved into the overflow menu. Called automatically on slot changes and DOM mutations, but you may need to call it manually when using nested slots (which don't trigger `slotchange` or `MutationObserver`).
`forceRecalculation`	`void`	Forces a recalculation of the tool-bar layout using a debounced measurement. In most cases, the tool-bar reacts automatically to size changes and DOM mutations, or can be updated explicitly by calling refresh. Call this method only in advanced scenarios where those mechanisms are insufficient, such as when the layout is affected by changes outside the tool-bar (e.g. complex nested slots or container size changes that are not observed). When invoked, any pending recalculation is canceled and a new one is scheduled with a 200ms delay. Once the timeout elapses, the tool-bar temporarily reveals the first hidden item, measures the wrapper and items, and internally triggers a resize/measurement pass to recompute which items should be visible or moved into the overflow menu.

forceRecalculation

void

Forces a recalculation of the tool-bar layout using a debounced measurement.

In most cases, the tool-bar reacts automatically to size changes and DOM mutations, or can be updated explicitly by calling refresh. Call this method only in advanced scenarios where those mechanisms are insufficient, such as when the layout is affected by changes outside the tool-bar (e.g. complex nested slots or container size changes that are not observed).

When invoked, any pending recalculation is canceled and a new one is scheduled with a 200ms delay. Once the timeout elapses, the tool-bar temporarily reveals the first hidden item, measures the wrapper and items, and internally triggers a resize/measurement pass to recompute which items should be visible or moved into the overflow menu.

Slots

Name	Description
`default`	The tool bar items.

CSS Parts

Name	Description
`wrapper`	The wrapper element that contains the tool bar items.

Keyboard interactions

Command	Description
Tab	Moves focus into the tool bar (to the first focusable element) and out of it.
Arrow Left	Moves focus to the previous focusable element in the tool bar.
Arrow Right	Moves focus to the next focusable element in the tool bar.
Home	Moves focus to the first item.
End	Moves focus to the last item.
Enter/Space	Activates the focused button or opens a menu.

WAI-ARIA

In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningful value, because it relies on the context or way a component is used.

Attributes that we recommend you add in certain scenarios are mentioned below.

Attribute	Value	Description
`aria-label`	string	Defines a string that labels the tool bar (describes its purpose). This helps screen reader users understand what the group of actions is for.
`aria-labelledby`	string	Links the tool bar to an existing heading or element that describes it, instead of using `aria-label`.

Interactive example

Tool bar

When to use

Contextual Actions

Bulk Actions

Action density

When not to use

Too Many Actions

Navigation or Simple Actions

Anatomy

Variants

States

Figma Properties

Behaviours

Handles overflow

Consistent styling and clear icon actions

Tool bar divider API

Properties

Tool bar API

Properties

Methods

Slots

CSS Parts

Keyboard interactions

WAI-ARIA