Button Group

A container that groups related buttons together with consistent styling. Use it when you want to group buttons that perform an action — for buttons that toggle a state, reach for a toggle group instead.

Last updated January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/button-group

Usage

import {
 
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@/components/ui/button-group"
 
export function Example() {
  return (
    <ButtonGroup>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </ButtonGroup>
  )
}

Examples

Orientation

Set the orientation prop to change the button group layout.

Size

Control the size of buttons using the size prop on individual buttons.

Nested

Nest <ButtonGroup> components to create button groups with spacing.

Separator

The ButtonGroupSeparator component visually divides buttons within a group. Buttons with the outline variant don't need one since they already have a border.

Split

Create a split button group by adding two buttons separated by a ButtonGroupSeparator.

Input

Wrap an Input component with buttons.

Input Group

Wrap an InputGroup component to create complex input layouts.

Dropdown Menu

Create a split button group with a DropdownMenu component.

Select

Pair with a Select component.

Popover

Use with a Popover component.

RTL

API Reference