XDS — Design System

Toolbar@xds/core v0.0.13 · XDSToolbar

Usage

Toolbar is a horizontal bar with left, center, and right areas. Use it for contextual actions within a content area — above a table, inside a card, or in a panel — not as a page-level header. Set the size once on the toolbar and all buttons, inputs, and tabs inside it match automatically.

ts
import {XDSToolbar} from '@xds/core/Toolbar'

Best practices

Guidance	Practices
Do	Put secondary actions like "Back" on the left, and primary actions like "Save" on the right.
Do	Make temporary toolbars like bulk selection visually distinct so users can tell they're contextual — for example, with a background color or border.
Do	Visually separate the toolbar from the content below it — with a divider, a background variant, or both.
Do	Use Toolbar as a card header when the header has interactive actions like filter or add — it gives you slot layout, keyboard navigation, and size cascading. If the header is just a title with no actions, a LayoutHeader or Section is enough.
Don't	Put too many actions in one toolbar — move less common items into a MoreMenu.
Don't	Set size on individual child buttons — set it once on the toolbar and it cascades automatically.
Don't	Use Toolbar for app-wide navigation like main menu links or sign out — use TopNav or LayoutHeader for that.

Sub-components

Toolbar is a compound component with 1 sub-component.

XDSToolbar

General-purpose toolbar container with three content slots and roving tabindex.

Prop	Type	Description
labelrequired	string	Accessible label for the toolbar, applied as aria-label.
startContent	ReactNode	Content aligned to the start (left in LTR).
centerContent	ReactNode	Centered content. Switches layout to CSS grid (1fr auto 1fr).
endContent	ReactNode	Content aligned to the end (right in LTR).
density	'compact' \| 'default' (default: 'default')	Toolbar density. Controls minimum height.
gap	SpacingStep (default: 2)	Gap between items within each slot.
orientation	'horizontal' \| 'vertical' (default: 'horizontal')	Orientation for keyboard navigation. Controls arrow key direction.
variant	XDSSectionVariant (default: 'transparent')	Visual variant passed to XDSSection.
xstyle	StyleXStyles	StyleX styles for layout customization. Must be a stylex.create() value.

Examples

Common configurations, variations, and states.

Toolbar — Bulk Actions

A compact toolbar with the wash variant for showing bulk selection actions. Use when the user selects multiple items in a list or table and needs quick access to batch operations.

Toolbar — Card Header

No description available.

Toolbar — Sizes

No description available.

Toolbar — Table Filter

A compact toolbar with a search input, filter buttons, and an overflow menu. Use above a data table to let users search, filter, and access view options.

Toolbar — Tab Navigation

A toolbar with tabs in the start slot and an action button at the end. Use as a card or section header when content is split into tabs with a primary action alongside.

Usage

import {XDSToolbar} from '@xds/core/Toolbar'

Best practices

Guidance	Practices
Do	Put secondary actions like "Back" on the left, and primary actions like "Save" on the right.
Do	Make temporary toolbars like bulk selection visually distinct so users can tell they're contextual — for example, with a background color or border.
Do	Visually separate the toolbar from the content below it — with a divider, a background variant, or both.
Do	Use Toolbar as a card header when the header has interactive actions like filter or add — it gives you slot layout, keyboard navigation, and size cascading. If the header is just a title with no actions, a LayoutHeader or Section is enough.
Don't	Put too many actions in one toolbar — move less common items into a MoreMenu.
Don't	Set size on individual child buttons — set it once on the toolbar and it cascades automatically.
Don't	Use Toolbar for app-wide navigation like main menu links or sign out — use TopNav or LayoutHeader for that.

Prop

Type

Description

labelrequired

string

Accessible label for the toolbar, applied as aria-label.

startContent

ReactNode

Content aligned to the start (left in LTR).

centerContent

ReactNode

Centered content. Switches layout to CSS grid (1fr auto 1fr).

endContent

ReactNode

Content aligned to the end (right in LTR).

density

'compact' | 'default' (default: 'default')

Toolbar density. Controls minimum height.

gap

SpacingStep (default: 2)

Gap between items within each slot.

orientation

'horizontal' | 'vertical' (default: 'horizontal')

Orientation for keyboard navigation. Controls arrow key direction.

variant

XDSSectionVariant (default: 'transparent')

Visual variant passed to XDSSection.

xstyle

StyleXStyles

StyleX styles for layout customization. Must be a stylex.create() value.