Button group

Loading...

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.

Loading...

Group with menu

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

Loading...

Group with text

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

Loading...

Component API

ButtonGroup

The ButtonGroup component arranges related buttons as a single control.

PropTypeDefault
classNamestring-
orientation"horizontal" | "vertical"horizontal

ButtonGroupText

The ButtonGroupText component renders text inside a button group.

PropTypeDefault
classNamestring-