Skip to main content
USWDS + Tailwind

Button group

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

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
button-group-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
button-group-segmented-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
button-group-segmented-red-demo.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

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
button-group-segmented-outline-demo.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.

PropTypeDefaultDescription
segmentedbooleanfalseJoins the buttons into one visual segment.
variantButton variant—Default color treatment for child buttons.
sizeButton size—Default size for child buttons.
unstyledboolean—Default text-link treatment for child buttons.

Button<button>

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

PropTypeDescription
variantButton variantOverrides the group variant.
sizeButton sizeOverrides the group size.
unstyledbooleanOverrides 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.