# ButtonGroup
- **Category:** Inputs (`inputs`)
- **Slug:** `inputs/button-group`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { ButtonGroup } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/inputs/button-group
> A horizontal cluster of Buttons or IconButtons — seamed into one control by default, or spaced by a gap.
## When to use
Use **ButtonGroup** to visually associate a small set of *independent* actions — each member still fires its own `onClick`.
- Choosing **one** option from a mutually-exclusive set (a view mode, a time range)? That's a selection, not an action — use **SegmentedControl** or **RadioGroup** so the pressed state is modelled correctly.
- Paging through results? Use **Pagination**, which handles the numbering and boundaries for you.
- A group is a layout wrapper, not a roving-focus widget: every button inside stays independently tabbable.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `attached` | `boolean` | no | `true` | Butt the buttons together and collapse their shared inner borders into one seam. Defaults to `true`. |
| `className` | `string` | no | — | — |
| `gap` | `enum` | no | `sm` | Space between members when not `attached`. Ignored while `attached`. |
| `style` | `CSSProperties` | no | — | — |
## Examples
### Basics
By default the group is `attached`: the members butt together and their shared inner borders collapse into a single seam, reading as one segmented control. Pass an `aria-label` to name the cluster.
```tsx
import { Button, ButtonGroup } from "@protocore/pds";
export default function Basics() {
// Attached by default: the inner borders collapse into a single seam.
return (
);
}
```
### Detached
Set `attached={false}` for related-but-separate actions — a primary/secondary CTA pair, say. The `gap` prop (`sm` · `md` · `lg`) controls the spacing.
```tsx
import { Button, ButtonGroup } from "@protocore/pds";
export default function Detached() {
// attached={false} spaces members by a gap variant instead of seaming them.
return (