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

Sortable data table
Prop	Type	Default	Description
title	string	-	Optional title displayed in the center section of the toolbar.
left	ReactNode	-	Content to render in the left section of the toolbar.
center	ReactNode	-	Content to render in the center section, below the title if present.
right	ReactNode	-	Content to render in the right section of the toolbar, before the avatar.
avatar	Avatar Component	-	Optional avatar component displayed at the end of the toolbar.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Visual theme of the toolbar.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow style for the toolbar.
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Border radius of the toolbar.
ariaLabel	string	"Toolbar"	ARIA label for the toolbar for accessibility.
headingLevel	1 \| 2 \| 3 \| 4 \| 5 \| 6	1	Heading level used for the title element.
className	string	-	Custom class name for the toolbar root element.
data-testid	string	"toolbar"	Test ID for the toolbar element.