Toolbar

The Toolbar component provides a top-level navigation and action bar. It supports optional left, center, and right sections, as well as avatars and customizable appearance.

Usage & Examples

Default

default.tsx


const leftIcon = (
  <IconButton theme="clear" shadow="none" icon={FaArrowLeft} ariaLabel="Back" />
);
const rightIcon = (
  <IconButton theme="clear" shadow="none" icon={FaBell} ariaLabel="Notifications" />
);

<Toolbar
  center={<strong>Dashboard</strong>}
  left={leftIcon}
  right={rightIcon}
/>

Props API

Toolbar props API
				Default	Description
`aria-describedby`	`string`	No	aria	`—`	References one or more elements that describe the toolbar.
`aria-label`	`string`	No	aria	`"Toolbar"`	Accessible name for the toolbar. Prefer this over the legacy `ariaLabel` prop.
`aria-labelledby`	`string`	No	aria	`—`	References another element that labels the toolbar. Prefer this over `aria-label` when there is visible text available.
`attachment`	`AttachmentType`	No	props	`"static"`	How the toolbar attaches to the viewport or page layout. "static" \| "fixed" \| "sticky"
`avatar`	`{ name?: string; src?: string; size?: SizeType; shape?: "circle" \| "square" \| "rounded"; theme?: ThemeType; outline?: boolean; glass?: boolean; onClick?: (e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void; "aria-label"?: string; }`	No	props	`—`	Optional avatar settings displayed at the far right.
`avatarClassName`	`string`	No	props	`—`	Optional additional class names for the rendered avatar component.
`avatarWrapperClassName`	`string`	No	props	`—`	Optional additional class names for the avatar wrapper.
`center`	`ReactNode`	No	props	`—`	Content to render in the center section, below the title if present.
`centerAriaLabel`	`string`	No	props	`"Toolbar center section"`	Optional accessible label for the center section.
`centerClassName`	`string`	No	props	`—`	Optional additional class names for the center section wrapper. Alias for `centerSectionClassName`.
`centerContentClassName`	`string`	No	props	`—`	Optional additional class names for the center section content wrapper.
`centerSectionClassName`	`string`	No	props	`—`	Optional additional class names for the center section wrapper.