Button Group

A container that groups related buttons together with consistent styling.

Default

Grouped actions with a nested overflow menu.

Installation

CLI

npx @sonojs/ui@latest add button-group

Also needsnpx @sonojs/ui@latest add separator

Usage

button-group.tsx

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

export function Example() {
  return (
    <ButtonGroup>
      <Button variant="outline">Button 1</Button>
      <Button variant="outline">Button 2</Button>
    </ButtonGroup>
  )
}

Props

Prop	Type	Default	Description
orientation	"horizontal" · "vertical"	"horizontal"	Layout direction of the group.
asChild	boolean	false	On ButtonGroupText — render as the child element.