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.
Basic
A button allows users to perform actions through clicks, presses, taps, or keystrokes.
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
Anatomy
import { ButtonGroup } from "@/components/ui/button-group";
import { Button } from "@/components/ui/button";<ButtonGroup>
<Button/>
</ButtonGroup>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.
Design Intent UI
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.