Button Group

Installation

pnpm dlx saastro add button-group

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add button-group --yes

pnpm add tailwind-variants

Usage

---
import { ButtonGroup } from "@/components/ui-saastro/button-group"
import { Button } from "@/components/ui-saastro/button"
---

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

Examples

Horizontal (Default)

<ButtonGroup>
  <Button variant="outline">First</Button>
  <Button variant="outline">Second</Button>
  <Button variant="outline">Third</Button>
</ButtonGroup>

Vertical

<ButtonGroup orientation="vertical">
  <Button variant="outline">Top</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Bottom</Button>
</ButtonGroup>

With Text Label

Use ButtonGroupText to add a non-interactive text label.

---
import { ButtonGroup, ButtonGroupText } from "@/components/ui-saastro/button-group"
import { Button } from "@/components/ui-saastro/button"
---

<ButtonGroup>
  <ButtonGroupText>Label</ButtonGroupText>
  <Button variant="outline">Action</Button>
</ButtonGroup>

With Separator

Use ButtonGroupSeparator to add visual separation between items.

---
import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui-saastro/button-group"
import { Button } from "@/components/ui-saastro/button"
---

<ButtonGroup>
  <Button variant="outline">Edit</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">Delete</Button>
</ButtonGroup>

Mixed Variants

<ButtonGroup>
  <Button>Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
</ButtonGroup>

Components

ButtonGroup

The container that groups buttons together and handles border radius.

ButtonGroupText

A non-interactive text element for labels.

ButtonGroupSeparator

A visual separator between grouped elements.

Props

ButtonGroup

ButtonGroupText

ButtonGroupSeparator

Accessibility

• Uses role="group" for proper grouping semantics
• Separator uses role="separator" with aria-orientation
• Maintains focus visibility with z-index management