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} aria-label="Back" />
  );
  const rightIcon = (
    <IconButton theme="clear" shadow="none" icon={FaBell} aria-label="Notifications" />
  );
  
  <Toolbar
    center={<strong>Dashboard</strong>}
    left={leftIcon}
    right={rightIcon}
  />

Props API

32 props
Columns
Toolbar props API
Default
Description
aria-describedbystringNoaria—References one or more elements that describe the toolbar.
aria-labelstringNoaria"Toolbar"Accessible name for the toolbar. Prefer this over the legacy `ariaLabel` prop.
aria-labelledbystringNoaria—References another element that labels the toolbar. Prefer this over `aria-label` when there is visible text available.
attachmentAttachmentTypeNoprops"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; onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void; "aria-label"?: string; variant?: VariantType; }Noprops—Optional avatar settings displayed at the far right.
avatarClassNamestringNoprops—Optional additional class names for the rendered avatar component.
avatarWrapperClassNamestringNoprops—Optional additional class names for the avatar wrapper.
centerReactNodeNoprops—Content to render in the center section, below the title if present.
centerAriaLabelstringNoprops"Toolbar center section"Optional accessible label for the center section.
centerClassNamestringNoprops—Optional additional class names for the center section wrapper. Alias for `centerSectionClassName`.
centerContentClassNamestringNoprops—Optional additional class names for the center section content wrapper.
centerSectionClassNamestringNoprops—Optional additional class names for the center section wrapper.