ToolbarGroup

ToolbarGroup defines how EnterUI handles a semantic group for related toolbar actions, including default structure, accessible states, and token-driven styling.

#Default usage

<Toolbar aria-label="Document toolbar">
  <ToolbarGroup>
    <ToolbarButton>Undo</ToolbarButton>
    <ToolbarButton>Redo</ToolbarButton>
  </ToolbarGroup>
  <ToolbarGroup compact>
    <ToolbarButton active>B</ToolbarButton>
    <ToolbarButton>I</ToolbarButton>
  </ToolbarGroup>
</Toolbar>

#Import

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

#Accessibility

ToolbarGroup renders role="group". Add aria-label if the group needs a specific screen-reader name.

#API

• compact reduces spacing between grouped actions.
• Accepts native div props and className.

#Styling

Uses .eui-toolbar__group classes and subtle dividers between groups.