@usevyre/react @usevyre/vue

Button Group

Groups related buttons into a single visual unit. Supports horizontal and vertical orientations, and an attached mode that collapses shared borders to create a segmented-control look.

Basic

Wrap any number of Button components in a ButtonGroup. Buttons are spaced with a gap by default and rendered with a semantic role="group".

import { ButtonGroup, Button } from "@usevyre/react";

<ButtonGroup>
  <Button variant="secondary">Cut</Button>
  <Button variant="secondary">Copy</Button>
  <Button variant="secondary">Paste</Button>
</ButtonGroup>

<script setup>
import { ButtonGroup, Button } from "@usevyre/vue";
</script>
<template>
  <ButtonGroup>
    <Button variant="secondary">Cut</Button>
    <Button variant="secondary">Copy</Button>
    <Button variant="secondary">Paste</Button>
  </ButtonGroup>
</template>

Attached (segmented control)

Add attached to collapse the gap and merge adjacent borders. The outermost buttons retain their border-radius while inner buttons have flat edges — ideal for view-mode toggles (Day / Week / Month).

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

<ButtonGroup :attached="true">
  <Button variant="primary">Day</Button>
  <Button variant="secondary">Week</Button>
  <Button variant="secondary">Month</Button>
</ButtonGroup>

Vertical orientation

Set orientation="vertical" to stack buttons in a column. Works with all variants and the attached prop.

<ButtonGroup orientation="vertical">
  <Button variant="ghost">Option A</Button>
  <Button variant="ghost">Option B</Button>
  <Button variant="ghost">Option C</Button>
</ButtonGroup>

<ButtonGroup orientation="vertical">
  <Button variant="ghost">Option A</Button>
  <Button variant="ghost">Option B</Button>
  <Button variant="ghost">Option C</Button>
</ButtonGroup>

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction of the grouped buttons.
`attached`	`boolean`	`false`	Removes gap and collapses shared borders — turns the group into a segmented control.
`size`	`"sm" \| "md" \| "lg" \| "icon"`	`"md"`	Size forwarded to child buttons via data-group-size attribute.
`className`	`string`	`—`	Additional CSS class.

AI Context

Valid props

Prop	Values	Default
`orientation`	`"horizontal"`\|`"vertical"`	`horizontal`
`size`	`"sm"`\|`"md"`\|`"lg"`\|`"icon"`	—
`attached`	`true`\|`false`	`false`

Common AI mistakes

ButtonGroup variant="..."→ Set variant on each <Button> inside the group
ButtonGroup without Button children→ Place <Button> elements as direct children

Quick examples

Segmented control

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

Vertical group

<ButtonGroup orientation="vertical" attached>
  <Button variant="secondary">Top</Button>
  <Button variant="secondary">Bottom</Button>
</ButtonGroup>

← Button Calendar →