Button Group

Groups two or more buttons into a single visually-connected control. Inner borders and corner radii are removed automatically — just wrap your buttons.

ExamplesCodeUsageChangelog

Basic

Tailwind v4

<ButtonGroup>
  <Button variant="secondary">Day</Button>
  <Button variant="secondary">Week</Button>
  <Button variant="secondary">Month</Button>
</ButtonGroup>

With selected state

Use :selected="true" on the active button to highlight the current choice.

Tailwind v4

<script setup>
const view = ref('week')
</script>

<ButtonGroup>
  <Button variant="secondary" :selected="view === 'day'" @click="view = 'day'">Day</Button>
  <Button variant="secondary" :selected="view === 'week'" @click="view = 'week'">Week</Button>
  <Button variant="secondary" :selected="view === 'month'" @click="view = 'month'">Month</Button>
</ButtonGroup>

Primary variant

Tailwind v4

<ButtonGroup>
  <Button>Save</Button>
  <Button>Save & Close</Button>
</ButtonGroup>

With icon buttons

Mix IconButton inside a group for compact toolbars.

Tailwind v4

<ButtonGroup>
  <IconButton variant="secondary" label="Align left"><svg .../></IconButton>
  <IconButton variant="secondary" label="Align center"><svg .../></IconButton>
  <IconButton variant="secondary" label="Align right"><svg .../></IconButton>
</ButtonGroup>

Sizes

Tailwind v4

<ButtonGroup>
  <Button variant="secondary" size="sm">Small</Button>
  <Button variant="secondary" size="sm">Group</Button>
</ButtonGroup>

Slots

Slot	Description
default	Button or IconButton elements to join