Toolbar

Accessible Toolbar component that follows the WAI-ARIA Toolbar Pattern. It is a container for grouping a set of controls.

Import

import {
  Toolbar,
  ToolbarItem,
  ToolbarButton,
  useToolbarState,
} from '@vtex/admin-ui'

Behavior

The useToolbarState hook handles the Toolbar behavior.

Loading...

ToolbarButton

A Button ready for the Toolbar

Loading...

ToolbarItem

For composition, you can use ToolbarItem. It has the item props as callback so that the render can be customized. This is useful to trigger Menus.

Loading...

Accessibility

Best practices

• Its always important to define an aria-label for the Toolbar:

const state = useToolbarState()

<Toolbar state={state} aria-label="MeaningfulNameFor Toolbar" />

• You should always pass a focusable element within ToolbarItem

// ✅ Good
<ToolbarItem>
  (props => <button {...props}>action</button>)
</ToolbarItem>

// ✅ Good
<ToolbarItem>
  (props => <Clickable {...props}>clickable surface</Clickable>)
</ToolbarItem>

// 🚨 Bad
<ToolbarItem>
  (props => <div {...props}>action</div>)
</ToolbarItem>

// 🚨 Bad
<ToolbarItem>
  (props => <div role="button" {...props}>action</div>)
</ToolbarItem>

Keyboard Navigation

• → moves focus to the next `ToolbarItem` if orientation is horizontal or not defined.
• ← moves focus to the previous `ToolbarItem` if orientation is horizontal or not defined.
• Home or PageUp moves focus to the first `ToolbarItem`.
• End or PageDown moves focus to the last `ToolbarItem`.

Props

Name	Type	Description	Required	Default
state	ToolbarState	Toolbar state	✅	-
disabled	boolean	Same as the HTML attribute	🚫	-
focusable	boolean	When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set	🚫	-