EEnterUI
DocsComponentsThemesDonation
Get Started
  • Component onboarding
    • Button
    • ButtonGroup
    • IconButton
    • Link
EnterUIDocsFoundationsActionsButtonGroup
FoundationsUpdated 6 May 2026

ButtonGroup

Group related actions with optional attached button edges.

ButtonGroup gives action sets a single visual unit without changing the Button API.

#Default usage

Button group

Use a group for related actions with equal priority.

Code
<ButtonGroup>
  <Button variant="secondary">Cancel</Button>
  <Button>Save</Button>
</ButtonGroup>

#Import

Code
import { Button, ButtonGroup } from "@froggdesign/enter-ui-react";

#Variants

Attached and vertical

Attached groups reduce visual gaps in dense toolbars.

#Accessibility

ButtonGroup renders role="group". Add aria-label when the surrounding context does not name the group.

#API

  • orientation: horizontal or vertical.
  • attached removes gaps and adjusts child button borders.
  • Supports native div props and className.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousButton
NextIconButton

On this page

  1. Default usage
  2. Import
  3. Variants
  4. Accessibility
  5. API
  6. Styling