Toolbar

Toolbars align a title and actions inside a full-width container, most often as a header or footer for another surface.

Toolbar

Overview

The toolbar is a horizontal container component that spans 100% width and provides structured slots for organizing content across the interface. It uses a border to visually separate the toolbar from adjacent content areas and offers distinct areas for content. This flexible layout system makes toolbars suitable for various contexts including page headers, dialog headers and footers, and drawer sections.

Usage

forge-toolbar aligns content to before-start, start, center, end, and after-end slots inside a full-width container, through inverted, noDivider, noPadding, and autoHeight. Use it as a header or footer inside a scaffold or dialog, as a section within a drawer, or anywhere else a title and actions need consistent alignment.

Rules

Use start for a title, end for the primary actions, and center only for content that's meant to stay centered regardless of the other slots' widths.

Pair a toolbar footer's actions the same way you would a dialog footer — confirming action last, dismissive action before it.

Set noDivider when the toolbar sits directly against another divider or border that already separates it from its neighbor.

Set inverted on every footer toolbar (card, dialog, table, and page footers) so its divider separates it from the content above.

Give toolbar titles a typography class: forge-typography--heading4 for a page title, forge-typography--heading3 for a card, dialog, or drawer title.

Don't

Don't overload a single toolbar with more actions than its slots can hold at the narrowest supported width.

Don't use a toolbar as a substitute for an app bar at the top of a page — reserve it for a header/footer role inside another surface.

Don't mix unrelated groups of actions into the same slot without a divider between them.

Don’t stack unrelated elements vertically; toolbars are for horizontal organization.

Structure

Every slot at once shows how the toolbar positions content: before-start and after-end sit outside the main three, which align to start, center, and end.

Every toolbar slot filled in at once, to show how each one is positioned.

<forge-toolbar>
  <div slot="before-start">
    Before start
  </div>
  <div slot="start">
    Start
  </div>
  <div slot="center">
    Center
  </div>
  <div slot="end">
    End
  </div>
  <div slot="after-end">
    After end
  </div>
</forge-toolbar>

Inverted

Set inverted to move the toolbar’s divider from the bottom edge to the top — use it on a footer toolbar, where the divider should separate it from the content above rather than below.

An inverted toolbar's divider sits on top instead of the bottom.

<forge-toolbar inverted>
  <div slot="before-start">
    Before start
  </div>
  <div slot="start">
    Start
  </div>
  <div slot="center">
    Center
  </div>
  <div slot="end">
    End
  </div>
  <div slot="after-end">
    After end
  </div>
</forge-toolbar>

Common patterns

Page titles are h2 styled with forge-typography--heading4, since the app bar title is the page’s h1. Container titles (card, dialog, drawer) use forge-typography--heading3.

Page header: the page title in start and page-level actions in end.

<forge-toolbar>
  <h2 slot="start" class="forge-typography--heading4">Orders</h2>
  <forge-button slot="end" variant="filled">New order</forge-button>
</forge-toolbar>

Page header with back navigation: a back icon button in start, before the title.

<forge-toolbar>
  <forge-icon-button slot="start" aria-label="Back to orders">
    <forge-icon name="arrow_back"></forge-icon>
  </forge-icon-button>
  <h2 slot="start" class="forge-typography--heading4">Order 1042</h2>
</forge-toolbar>

Card or dialog header: the title in start, and close or overflow icon buttons in end.

<forge-toolbar slot="header">
  <h3 slot="start" class="forge-typography--heading3">Recent activity</h3>
  <forge-icon-button slot="end" density="medium" aria-label="More options">
    <forge-icon name="more_vert"></forge-icon>
  </forge-icon-button>
</forge-toolbar>

Drawer or side sheet header: the title in start and a close icon button in end.

<forge-toolbar>
  <h3 slot="start" class="forge-typography--heading3">Filters</h3>
  <forge-icon-button slot="end" density="medium" aria-label="Close filters">
    <forge-icon name="close"></forge-icon>
  </forge-icon-button>
</forge-toolbar>

Footer: inverted, with actions end-aligned following the button hierarchy: the secondary tonal action first, the primary filled action last, --forge-spacing-medium apart.

<forge-toolbar slot="footer" inverted>
  <div slot="end" class="flex items-center gap-medium">
    <forge-button variant="tonal">Cancel</forge-button>
    <forge-button variant="filled">Save</forge-button>
  </div>
</forge-toolbar>

Toolbars allow you to place titles and actions within a container and align them to the start, center, or end of the toolbar. This component is useful as headers and footers within pages, dialogs, sections... etc. to ensure consistent layout and alignment.

import "@tylertech/forge/toolbar";

Properties

Property	Attribute	Type	Default	Description
`inverted`	`inverted`	`boolean`	`false`	Controls whether a bottom divider (default) or top divider (true) is used.
—	`no-divider`	`boolean`	—	Hides the internal divider.
—	`no-border`	`boolean`	—	Deprecated. Use `no-divider` instead.
—	`no-padding`	`boolean`	—	Sets the internal padding style to 0.
—	`auto-height`	`boolean`	—	Forces the internal container to use `height: auto` for dynamic content that doesn't fit the static height.

Slots

Name	Description
`before-start`	The content to place before the start slot.
`start`	The content to place at the start of the toolbar.
`center`	The content to place in the center of the toolbar.
`end`	The content to place at the end of the toolbar.
`after-end`	The content to place after the end slot.

CSS Parts

Name	Description
`::part(root)`	The root container element wrapping all slots and content.
`::part(inner)`	The internal container element for the start, center, and end slots.
`::part(before-section-start)`	The container element for the before-start slot.
`::part(section-start)`	The container element for the start slot.
`::part(section-center)`	The container element for the center slot.
`::part(section-end)`	The container element for the end slot.
`::part(after-section-end)`	The container element for the after-end slot.

CSS Custom Properties

Name	Description
`--forge-toolbar-height`	Controls the height.
`--forge-toolbar-min-height`	Controls the minimum height. Defaults to the toolbar height.
`--forge-theme-surface`	Controls the background-color of the toolbar.
`--forge-toolbar-divider-width`	Controls the divider width.
`--forge-toolbar-divider-style`	Controls the divider style.
`--forge-toolbar-divider-color`	Controls the divider color.
`--forge-toolbar-shape`	Controls the border radius of the toolbar.
`--forge-toolbar-start-start-shape`	Controls the border radius of the top left corner.
`--forge-toolbar-start-end-shape`	Controls the border radius of the top right corner.
`--forge-toolbar-end-start-shape`	Controls the border radius of the bottom left corner.
`--forge-toolbar-end-end-shape`	Controls the border radius of the bottom right corner.
`--forge-toolbar-padding`	Controls the left and right padding using the padding-inline style.
`--forge-toolbar-padding-block`	Controls the top and bottom padding using the padding-block style.
`--forge-toolbar-padding-inline`	Controls the left and right padding using the padding-block style.
`--forge-toolbar-columns`	The grid column track sizes.

Keyboard interaction

Ensure every control slotted into the toolbar is reachable by the tab key and can be activated or updated by keyboard, not just a pointer.