ToolbarButton

ToolbarButton defines how EnterUI handles a compact button for use inside toolbar and dense product controls, including default structure, accessible states, and token-driven styling.

#Default usage

<Toolbar aria-label="Formatting toolbar">
  <ToolbarGroup>
    <ToolbarButton active>B</ToolbarButton>
    <ToolbarButton>I</ToolbarButton>
    <ToolbarButton variant="ghost">Code</ToolbarButton>
    <ToolbarButton variant="danger">Clear</ToolbarButton>
  </ToolbarGroup>
</Toolbar>

#Import

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

#Accessibility

ToolbarButton renders a native button. The active prop maps to aria-pressed. Provide an aria-label for icon-only content.

#API

• active marks the button as pressed.
• variant: default, ghost, or danger.
• size: sm or md.
• Includes native button props and className.

#Styling

Uses .eui-toolbar-button classes and compact token-driven spacing.