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.
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.
Preview loads on approachPreview loads on approach
Exact source · toolbar-three-slot
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {Toolbar} from '@astryxdesign/core/Toolbar';
import {Button} from '@astryxdesign/core/Button';
import {Icon} from '@astryxdesign/core/Icon';
import {Heading} from '@astryxdesign/core/Text';
import {Card} from '@astryxdesign/core/Card';
import {Section} from '@astryxdesign/core/Section';
import {ArrowLeftIcon} from '@heroicons/react/24/outline';
export default function ToolbarThreeSlot() {
return (
<Card style={{width: 600, height: '100%', marginTop: 260}}>
<Toolbar
label="Document toolbar"
dividers={['bottom']}
startContent={
<Button
label="Back"
variant="ghost"
icon={<Icon icon={ArrowLeftIcon} />}
isIconOnly
/>
}
centerContent={<Heading level={4}>Title</Heading>}
endContent={
<>
<Button label="Discard" variant="secondary" />
<Button label="Save" variant="primary" />
</>
}
/>
<Section />
</Card>
);
}
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.
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.
Put too many actions in one toolbar; move less common items into a MoreMenu.
Set size on individual child buttons; set it once on the toolbar and it cascades automatically.
Use Toolbar for app-wide navigation like main menu links or sign out; use TopNav or LayoutHeader for that.
Typed props
Prop
Type and behavior
label
string · required
Accessible label for the toolbar, applied as aria-label.
Size of the toolbar. Controls minimum height and coordinates with Button, TextInput, TabList, and Selector; children inherit this size as their default via SizeContext.
