Button Group

Component button-group-demo not found in registry.

Installation

# Recommended (pnpm monorepo)
pnpm add @radix-ui/react-button-group
 
# Or use the shadcn helper to scaffold a component (if available):
npx shadcn@latest add button-group

Usage

import { ButtonGroup } from "@/components/ui/button-group"
 
export default function Example() {
  return (
    <ButtonGroup.Root>
      <ButtonGroup.Item>Left</ButtonGroup.Item>
      <ButtonGroup.Item>Middle</ButtonGroup.Item>
      <ButtonGroup.Item>Right</ButtonGroup.Item>
    </ButtonGroup.Root>
  )
}

Examples

Basic Button Group

Component button-group-demo not found in registry.

Different Sizes

Component button-group-sizes not found in registry.

Orientation

Component button-group-vertical not found in registry.

With Icons

Component button-group-icons not found in registry.

Disabled

Component button-group-disabled not found in registry.

Active / Selected

Component button-group-active not found in registry.

Text

Component button-group-text not found in registry.

Nested

Component button-group-nested not found in registry.

Props

ButtonGroup.Root

This component accepts the usual container props and orientation control.

ButtonGroup.Item

Each item supports typical button props and the asChild pattern.