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

Default


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

<Toolbar
  title="Dashboard"
  left={leftIcon}
  right={rightIcon}
/>

Props

Data table
	Type	Description
aria-describedby	string	References one or more elements that describe the toolbar.
aria-label	string	Accessible name for the toolbar. Prefer this over the legacy `ariaLabel` prop.
aria-labelledby	string	References another element that labels the toolbar. Prefer this over `aria-label` when there is visible text available.
attachment	AttachmentType	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; onClick?: (e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void; "aria-label"?: string; }	Optional avatar settings displayed at the far right.
center	ReactNode	Content to render in the center section, below the title if present.
centerAriaLabel	string	Optional accessible label for the center section.
className	string	Optional additional class names for styling.
data-testid	string	Data test ID for testing frameworks.
left	ReactNode	Content to render in the left section of the toolbar.
leftAriaLabel	string	Optional accessible label for the left section.
right	ReactNode	Content to render in the right section of the toolbar, before the avatar.
rightAriaLabel	string	Optional accessible label for the right section.
rounding	RoundingType	Rounding of the component. "none" \| "small" \| "medium" \| "large" \| "full"
shadow	ShadowType	Shadow of the component. "none" \| "light" \| "medium" \| "strong" \| "intense"
theme	ThemeType	The visual theme of the toolbar. "primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"
title	string	Optional title displayed in the center section.
titleClassName	string	Optional additional class name for the toolbar title element. Useful when consumers need to style the title directly.
titleId	string	Optional id used for the rendered title element. Useful for linking the toolbar with `aria-labelledby`.