Button group

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/button-group

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

npm install tailwind-variants tailwind-merge

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

<ButtonGroup>
  <Button/>
</ButtonGroup>

You can arrange buttons either horizontally or vertically using the orientation prop.

You can combine button groups with menus to create a more complex and interactive UI.

You can also combine button groups with text to provide context or instructions.

Deploy

The ButtonGroup component arranges related buttons as a single control.

Prop	Type	Default
`className`	`string`	-
`orientation`	`"horizontal" \| "vertical"`	`horizontal`

The ButtonGroupText component renders text inside a button group.

Prop	Type	Default
`className`	`string`	-

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.