Toolbar — CMS-aiChemist

Import

1import { Toolbar } from "packages/ui/src";

Props

ToolbarProps

Prop	Type	Required
`items`	`ToolbarItem[]`	Yes
`ariaLabel`	`string`	No
`className`	`string`	No

Examples

Toolbar Component

Horizontal action toolbar with toggle buttons, dividers, icons, and ARIA toolbar role. 40th component in the shared UI library.

Formatting Toolbar (interactive toggles)

View Toolbar

Minimal (no dividers)

Metadata

Component Metadata

Familynavigation

FrameworksNext.js, Astro/EmDash

DescriptionHorizontal toolbar with icon buttons, active/pressed toggle state, divider separators, and ARIA toolbar role. Token-driven colors, spacing, and border radius for consistent action bars.

PropsToolbarProps (items: ToolbarItem[], ariaLabel?: string, className?: string)

Statesdefault, active-button, with-divider, with-icon

A11y

role=toolbar with aria-label
aria-pressed on toggle buttons
Dividers are aria-hidden
Button title for tooltip

Responsive

Horizontal flex layout
Wraps when constrained

Motion

Button hover color and background transition

Token Dependencies

components.toolbar.background
components.toolbar.borderColor
components.toolbar.padding
components.toolbar.gap
components.toolbar.buttonColor
components.toolbar.buttonHoverColor
components.toolbar.buttonHoverBackground
components.toolbar.buttonActiveColor
components.toolbar.buttonActiveBackground
components.toolbar.buttonPadding
components.toolbar.buttonBorderRadius
components.toolbar.buttonFontSize
components.toolbar.dividerColor

Content Slotsitems[].label (string), items[].icon (ReactNode)

CMS Bindings

Action list from CMS config
Active state from application state

Test Cases

Renders toolbar with role=toolbar
Renders all button items
Active button has aria-pressed=true
Inactive button has aria-pressed=false
Renders divider item
Divider is aria-hidden
Has aria-label
Passes className through