---
title: Button group (React) - USWDS + Tailwind
description: Group related buttons into a single set of actions. Compare
  standard, segmented, and outline button group styles.
---

# Button group

Group related buttons into a single set of actions. Compare standard, segmented, and outline button group styles.

## Examples

### Default

```tsx
import { ButtonGroup } from '@uswds-tailwind/react/button-group'

export default function ButtonGroupDemo() {
  return (
    <ButtonGroup.Root aria-label="Default actions">
      <ButtonGroup.Button type="button" variant="outline">Left</ButtonGroup.Button>
      <ButtonGroup.Button type="button">Right</ButtonGroup.Button>
    </ButtonGroup.Root>
  )
}
```

### Segmented

```tsx
import { ButtonGroup } from '@uswds-tailwind/react/button-group'

export default function ButtonGroupSegmentedDemo() {
  return (
    <ButtonGroup.Root segmented aria-label="Segmented actions">
      <ButtonGroup.Button type="button">Left</ButtonGroup.Button>
      <ButtonGroup.Button type="button">Middle</ButtonGroup.Button>
      <ButtonGroup.Button type="button">Right</ButtonGroup.Button>
    </ButtonGroup.Root>
  )
}
```

### Segmented Red

```tsx
import { ButtonGroup } from '@uswds-tailwind/react/button-group'

export default function ButtonGroupSegmentedRedDemo() {
  return (
    <ButtonGroup.Root segmented variant="red" aria-label="Segmented Red actions">
      <ButtonGroup.Button type="button">Left</ButtonGroup.Button>
      <ButtonGroup.Button type="button">Middle</ButtonGroup.Button>
      <ButtonGroup.Button type="button">Right</ButtonGroup.Button>
    </ButtonGroup.Root>
  )
}
```

### Segmented Outline

```tsx
import { ButtonGroup } from '@uswds-tailwind/react/button-group'

export default function ButtonGroupSegmentedOutlineDemo() {
  return (
    <ButtonGroup.Root segmented variant="outline" aria-label="Segmented Outline actions">
      <ButtonGroup.Button type="button">Left</ButtonGroup.Button>
      <ButtonGroup.Button type="button">Middle</ButtonGroup.Button>
      <ButtonGroup.Button type="button">Right</ButtonGroup.Button>
    </ButtonGroup.Root>
  )
}
```

## Component API

Place ButtonGroup.Button parts inside Root. The root supplies shared Button styling defaults.

### Root `<div>`

Groups related actions.

| Prop | Type | Default | Description |
| - | - | - | - |
| `segmented` | `boolean` | `false` | Joins the buttons into one visual segment. |
| `variant` | `Button variant` | `—` | Default color treatment for child buttons. |
| `size` | `Button size` | `—` | Default size for child buttons. |
| `unstyled` | `boolean` | `—` | Default text-link treatment for child buttons. |

### Button `<button>`

Uses Button styling and can override the root variant, size, or unstyled setting.

| Prop | Type | Description |
| - | - | - |
| `variant` | `Button variant` | Overrides the group variant. |
| `size` | `Button size` | Overrides the group size. |
| `unstyled` | `boolean` | Overrides the group text-link treatment. |

### Accessibility

Choose labels that distinguish each action. The root supplies the group role; add an accessible group name when the relationship needs one.