Button group

Installation

Install the component via the CLI in one command.

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 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.

Group with menu

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.

Component API

ButtonGroup

ButtonGroupText