ButtonGroup

Group related buttons together with seamless visual connection and consistent spacing.

Import

import { ButtonGroup, Button } from '@akitectio/aki-ui'

Basic Usage

<ButtonGroup>
  <Button variant="outline">First</Button>
  <Button variant="outline">Second</Button>
  <Button variant="outline">Third</Button>
</ButtonGroup>

Different Variants

Primary Buttons

Secondary Buttons

{/* Primary Button Group */}
<ButtonGroup>
  <Button variant="primary">Save</Button>
  <Button variant="primary">Save & Continue</Button>
  <Button variant="primary">Save Draft</Button>
</ButtonGroup>

{/* Secondary Button Group */}
<ButtonGroup>
  <Button variant="secondary">View</Button>
  <Button variant="secondary">Edit</Button>
  <Button variant="secondary">Delete</Button>
</ButtonGroup>

Vertical Orientation

<ButtonGroup vertical>
  <Button variant="outline">Top</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Bottom</Button>
</ButtonGroup>

API Reference

ButtonGroup Props

PropTypeDefaultDescription
verticalbooleanfalseStack buttons vertically
size"sm" | "md" | "lg""md"Size of all buttons in the group
equalWidthbooleanfalseMake all buttons equal width

Accessibility

  • • Keyboard Navigation: Tab moves between button groups, Arrow keys navigate within group
  • • ARIA Support: Uses role="group" for proper grouping
  • • Focus Management: Clear focus indicators and logical tab order
  • • Screen Reader: Properly announced as a button group