Button Group

The official demo uses a dropdown submenu, which the Astro dropdown menu does not have, so it is in the React Button Group docs only.

Installation

npx shadcn@latest add @fulldev/button-group

Usage

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

<ButtonGroup aria-label="Document actions">
  <Button variant="outline">Save</Button>
  <Button variant="outline">Publish</Button>
</ButtonGroup>

ButtonGroup renders a div with role="group". Give each group an accessible name with aria-label or aria-labelledby. The group connects the edges of its direct children that have a data-slot. Dropdown Menu, Popover and Select render a wrapper element around their trigger, so give that trigger the connected edge classes itself, such as rounded-l-none border-l-0.

Use ButtonGroup for buttons that perform an action and Toggle Group for buttons that toggle a state.

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

ButtonGroupSeparator visually divides buttons within a group. Outline buttons have a border and do not need one.

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

The official RTL example has the same dropdown submenu, so it is in the React Button Group docs only.

API Reference

Source: src/components/ui/button-group

ButtonGroup

ButtonGroupText

Accepts as and the attributes for that HTML element. Render it as a label when it describes a form control.

---
import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group"
import { Input } from "@/components/ui/input"
---

<ButtonGroup class="w-full max-w-sm" aria-label="Repository owner">
  <ButtonGroupText as="label" for="repository-name">
    full.dev/
  </ButtonGroupText>
  <Input id="repository-name" value="ui" aria-label="Repository name" />
</ButtonGroup>

ButtonGroupSeparator

Uses the Separator API. Its orientation defaults to "vertical".