Buttons

Button group

Button group arranges actions in a horizontal or vertical container, managing spacing, focus order, and wrapping so buttons always stay cohesive and accessible.

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/button-group

Manual installation

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

Anatomy

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

<ButtonGroup>
  <Button/>
</ButtonGroup>

Examples

Orientation

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.

Group with text

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

Deploy

Component API

ButtonGroup

The ButtonGroup component arranges related buttons as a single control.

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

ButtonGroupText

The ButtonGroupText component renders text inside a button group.

Prop	Type	Default
`className`	`string`	-

Unlock the full power of
Intent UI Design

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

Learn more

Next.js

Button