Astryx Design System

Toolbar@astryxdesign/core v0.0.15 · Toolbar

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 {Toolbar} from '@astryxdesign/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.

Examples

Common configurations, variations, and states.

Toolbar — Bulk Actions

A compact toolbar with the muted 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

A toolbar as a card header with a left-aligned title and icon actions on the right. Use Toolbar instead of LayoutHeader when your card header has interactive actions; Toolbar adds start/end slot layout, keyboard navigation, and automatic size cascading. If the header is just a title with no actions, a LayoutHeader or Section is enough.

Toolbar — Sizes

Small, medium, and large toolbars side by side. The size prop cascades to child buttons and inputs automatically. Use small in dense UIs like cards, medium for most cases, and large for spacious layouts.

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 {Toolbar} from '@astryxdesign/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.