ComponentsEnterpriseToolbar

Toolbar

Toolbar groups contextual actions, selection feedback, and overflow controls into one predictable enterprise surface.

Composition APIKeyboard navigationOverflowResponsive wrapping3 sizes

Overview

Use Toolbar to keep actions close to the content or selection they affect while preserving a stable reading and keyboard order.

Project actions

Live preview

Change the selection state and open the overflow actions in this live preview.

ProjectsToolbar.tsx
tsx
import { Button, IconButton, Toolbar } from 'omverse-ui'
 
<Toolbar
variant="bordered"
label="Project actions"
title="Migration projects"
description="3 selected"
leading={<Checkbox aria-label="Select all projects" />}
trailing={<IconButton icon="refresh" aria-label="Refresh projects" />}
overflow={<ProjectOverflowActions />}
>
<Button variant="outlined">Assign</Button>
<Button>Add project</Button>
</Toolbar>

Anatomy

Toolbar combines optional selection, context, primary actions, supporting status, and secondary overflow in one horizontal region.

□Projects3 selectedAssignAdd•••12345
  1. 1
    Leading control

    Selects the current scope or identifies the action context.

  2. 2
    Context title

    Names the collection, object, or mode affected by the actions.

  3. 3
    Primary actions

    Keeps the most frequent and important actions immediately available.

  4. 4
    Overflow

    Discloses lower-frequency actions without crowding the toolbar.

  5. 5
    Supporting status

    Communicates selection, result, or synchronization context.

When to use

Use Toolbar when several actions share a clear object, selection, or collection scope.

Recommended

  • Act on a collection or selection

    Place above DataTable, List, or content workspaces where actions affect the current scope.

  • Keep repeated actions stable

    Give frequent actions a predictable location across states and screen sizes.

  • Separate primary and secondary actions

    Keep high-value actions visible and move occasional actions into overflow.

When not to use

Prefer focused controls when there is no shared action scope or only one obvious action.

Avoid

  • Do not replace page navigation

    Use Navbar, Tabs, or Breadcrumb for destinations and hierarchy.

  • Do not wrap form submission

    Place form actions near their fields or in the form footer.

  • Do not collect unrelated actions

    Every control should affect the same object, selection, or workspace.

Variants

Surface and density variants adapt Toolbar to page, panel, and floating workspace contexts.

Plain

Blends into a page or panel that already provides containment.

Bordered

Defines the action region on open or mixed surfaces.

Raised

Keeps actions prominent above scrolling or layered content.

Sizes

Small, medium, and large tune density without changing semantics.

States

Toolbar preserves context while individual controls communicate their own availability and progress.

StateTriggerVisual responseInteraction
DefaultNo transient operationContext and available actionsTab or arrow keys reach controls
SelectionOne or more objects selectedCount and bulk actions appearActions apply to the stated scope
Overflow openMore actions activatedSecondary action group is disclosedEscape closes and restores focus
LoadingActions are updatingProgress status appearsExisting context stays visible
Disabled actionAction is unavailableIndividual control loses emphasisDisabled control cannot activate
WrappedHorizontal space is limitedActions continue on a new lineReading order remains logical

Behavior

Toolbar manages grouping, overflow disclosure, and toolbar-level keyboard movement while composed controls retain their native behavior.

Keyboard movement

Left and Right arrows move between visible toolbar controls; Home and End jump to boundaries.

Overflow

Secondary actions open from a named trigger and close with Escape.

Wrapping

Controls wrap in DOM order instead of shrinking below usable sizes.

RTL

Arrow direction follows the document writing direction.

Accessibility

Toolbar provides a named toolbar region, native controls, predictable focus order, and status announcements.

KeyAction
TabMoves into or out of the toolbar and through disclosed overflow controls.
←→Moves between visible toolbar controls and wraps at the ends.
HomeEndMoves to the first or last visible toolbar control.
EnterSpaceActivates the focused control using its native behavior.
EscCloses overflow and restores focus to More actions.
  • Give every toolbar a concise accessible label.
  • Use native buttons, links, inputs, and selects inside the toolbar.
  • Give every icon-only action an aria-label.
  • Keep DOM order aligned with visual and responsive order.
  • Disable individual actions rather than the whole region.
  • Announce loading or selection feedback without replacing context.

Content guidelines

Action labels should be concise, specific, and understandable within the toolbar’s stated scope.

Name the scope

Use a short object or collection title.

ExampleMigration projects

Use verb-first actions

Describe the result of activating the control.

ExampleAssign owner

Quantify selections

State the current bulk-action scope.

Example3 selected

Keep overflow neutral

Use a familiar accessible label for secondary actions.

ExampleMore project actions

Examples

Toolbar supports controlled overflow when applications need to coordinate disclosure with other workspace state.

Selection toolbar

Live preview

The same project action composition shown in a contained enterprise surface.

ControlledToolbar.tsx
tsx
const [overflowOpen, setOverflowOpen] = useState(false)
 
<Toolbar
label="Document actions"
overflowOpen={overflowOpen}
onOverflowOpenChange={setOverflowOpen}
overflow={<>
<Button variant="text">Duplicate</Button>
<Button variant="text">Archive</Button>
</>}
>
<Button variant="outlined">Share</Button>
</Toolbar>

Props / API

Toolbar extends div attributes and composes application-owned native or design-system controls through named slots.

Props

PropTypeDefaultDescription
labelstring'Actions'Accessible name announced for the toolbar region.
leadingReactNodeundefinedOptional leading visual or selection control.
titleReactNodeundefinedShort title identifying the current action scope.
descriptionReactNodeundefinedSupporting selection, result, or sync context.
childrenReactNodeundefinedPrimary controls in toolbar reading order.
trailingReactNodeundefinedEnd-aligned secondary controls or status.
overflowReactNodeundefinedAdditional controls disclosed from More actions.
overflowLabelstring'More actions'Accessible name for the overflow trigger.
overflowOpenbooleanundefinedControlled overflow visibility.
defaultOverflowOpenbooleanfalseInitial uncontrolled overflow visibility.
onOverflowOpenChange(open: boolean) => voidundefinedRuns whenever overflow visibility changes.
loadingbooleanfalseAnnounces updating actions without replacing controls.
variant'plain' | 'bordered' | 'raised''plain'Sets the toolbar surface treatment.
size'sm' | 'md' | 'lg''md'Controls toolbar density and type scale.
wrapbooleantrueAllows controls to wrap when horizontal space is limited.