Toolbar

Toolbar defines how EnterUI handles a compact action surface for editor, table, and product tool controls, including default structure, accessible states, and token-driven styling.

#Default usage

<Toolbar aria-label="Editor toolbar">
  <ToolbarGroup>
    <ToolbarButton active aria-label="Bold">B</ToolbarButton>
    <ToolbarButton aria-label="Italic">I</ToolbarButton>
  </ToolbarGroup>
  <ToolbarGroup>
    <ToolbarButton variant="ghost">Preview</ToolbarButton>
  </ToolbarGroup>
</Toolbar>

#Import

import { Toolbar, ToolbarButton, ToolbarGroup } from "@froggdesign/enter-ui-react";

#Accessibility

Toolbar renders role="toolbar" and sets aria-orientation. Add an aria-label when the toolbar is not labelled by visible text.

#API

• orientation: horizontal or vertical.
• Accepts native div props and className.

#Styling

Uses .eui-toolbar classes with quiet glass surface tokens.