Toolbar

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.

Installation

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

Requires React 19+, base CSS and a Theme provider. See Setup.

Toolbar

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.

Usage guidance

• Put secondary actions like "Back" on the left, and primary actions like "Save" on the right.
• Make temporary toolbars like bulk selection visually distinct so users can tell they're contextual, for example with a background color or border.
• Visually separate the toolbar from the content below it, with a divider, a background variant, or both.
• 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.
• Avoid: Put too many actions in one toolbar; move less common items into a MoreMenu.
• Avoid: Set size on individual child buttons; set it once on the toolbar and it cascades automatically.
• Avoid: Use Toolbar for app-wide navigation like main menu links or sign out; use TopNav or LayoutHeader for that.

Theming API

{
  "targets": [
    {
      "className": "astryx-toolbar",
      "states": [
        "size"
      ]
    }
  ]
}

Toolbar

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

Anatomy

• Outer chrome: Section-owned container that supplies the toolbar surface, padding, and selected divider edges.
• Toolbar: Named toolbar row that owns toolbar semantics and the start, optional center, and end layout.

Examples

• Toolbar — Three Slot: A toolbar with start, center, and end content using the three-column grid layout. Use when you need a centered title or heading with navigation and actions on either side.
• 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: Filter bar above a table: a search box leads the row, each field beside it is a closed trigger that doubles as its own filter chip — the bare field name unset, the whole clause once set — and the clauses fold from the end into a count as the row narrows, followed by a live result count, a clear all, and a column picker. Use to search, filter, and narrow flat rows of records such as jobs, orders, tickets, or users.
• 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.

Complete example dependencies

Some examples import optional icons. The per-example install command in the examples list identifies exactly what that example needs. For all examples on this page:

npm install @heroicons/react@2.2.0 lucide-react@1.24.0

Source StyleX compilation

ToolbarTableFilter contain stylex.create and require a StyleX source build pipeline. Precompiled Core CSS alone does not compile these examples. See Styling before copying them.