Button Group

Installation

npx shadcn@latest add @blank/button-group

Usage

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

<ButtonGroup>
  <Button variant="outline">Previous</Button>
  <Button variant="outline">Next</Button>
</ButtonGroup>

Examples

Text

ButtonGroupText labels the group from inside it and takes the same border as an outline button.

Split button

A primary action with its variants one click away. The menu trigger is just another button in the group; ButtonGroupSeparator keeps two buttons with the same fill from reading as one.

Orientation