Button Group - TypeScript UI

The Button Group component visually groups related buttons into a single unit, with support for horizontal and vertical orientation, separators, and inline text.

Button Group Examples

Horizontal

Vertical

With Icons

With Separator and Text

v1.2.0

Installation

# The component is already installed at:
# src/components/ui/shadcn/button-group.tsx

Usage

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

export function ButtonGroupDemo() {
  return (
    <ButtonGroup>
      <Button variant="outline">Left</Button>
      <Button variant="outline">Center</Button>
      <Button variant="outline">Right</Button>
    </ButtonGroup>
  )
}

Props

ButtonGroup

Prop	Type	Default	Description
orientation	`horizontal` \| `vertical`	`horizontal`	Direction the buttons are stacked

Components

Component	Description
ButtonGroup	The root container, merges adjacent borders and radii
ButtonGroupSeparator	A vertical or horizontal divider between buttons
ButtonGroupText	Non-interactive text or label rendered like a button