ButtonGroup

Installation

npx bambiui init
npx bambiui add button
npx bambiui add buttongroup

ButtonGroup installs a wrapper component plus buttongroup.css. It expects Button to be installed separately when you use it with bambiui buttons.

Imports

React

import { Button } from './components/ui/button';
import { ButtonGroup } from './components/ui/buttongroup';

Svelte

<script>
import { Button } from './components/ui/button';
import { ButtonGroup } from './components/ui/buttongroup';
</script>

Vue

<script setup>
import { Button } from './components/ui/button';
import { ButtonGroup } from './components/ui/buttongroup';
</script>

Astro

---
import { Button } from './components/ui/button';
import { ButtonGroup } from './components/ui/buttongroup';
---

Attached Groups

Attached groups remove the gap and collapse adjacent borders. Use them for segmented controls and tightly related actions.

<ButtonGroup aria-label="Text alignment">
  <Button appearance="outline">Left</Button>
  <Button appearance="outline">Center</Button>
  <Button appearance="outline">Right</Button>
</ButtonGroup>

Spaced Groups

Set attached={false} when the actions are related but should keep visual separation.

<ButtonGroup attached={false} aria-label="Dialog actions">
  <Button appearance="ghost">Cancel</Button>
  <Button>Save</Button>
</ButtonGroup>

In Vue, use :attached="false".

Orientation

Orientation	Behavior
horizontal	Row layout, default
vertical	Column layout

<ButtonGroup orientation="vertical" aria-label="Export format">
  <Button appearance="outline">PDF</Button>
  <Button appearance="outline">CSV</Button>
  <Button appearance="outline">JSON</Button>
</ButtonGroup>

API Reference

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	Direction of grouped controls
attached	boolean	true	Removes gaps and merges button borders
role	string	'group'	ARIA grouping role

All other HTML <div> attributes are forwarded to the wrapper. React uses className; Svelte, Vue, and Astro use class.

Data Attributes

Attribute	Source
data-orientation	orientation
data-attached	attached

Accessibility

• Keep role="group" for related action groups.
• Provide aria-label or aria-labelledby when the group purpose is not visible in nearby text.
• ButtonGroup does not manage selection state; use the child buttons’ own attributes for pressed, active, or disabled states.