EnterUI
DocsComponentsThemesExamplesDonation
Get Started
  • Component onboarding
    • Button
    • ButtonGroup
    • IconButton
    • Link

Default usage

  1. EnterUI
  2. /Docs
  3. /Foundations
  4. /Actions
  5. /ButtonGroup
Updated 3 October 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
  • Default usage
  • Import
  • Variants
  • Accessibility
  • API
  • Styling