Button Group

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/button-group.json

Usage

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

<ButtonGroup> 
  <Button />
  <ButtonGroupSeparator />
  <Button />
</ButtonGroup>

Accessibility

• Use aria-label or aria-labelledby to label the group.

<ButtonGroup aria-label="Media controls">
  {/* Your content here */}
</ButtonGroup>

Orientation

The orientation prop controls the layout direction of the button group.

Horizontal

Vertical

Examples

Nested

Button groups can be nested inside other button groups to add spacing between buttons.

Separator

The <ButtonGroupSeparator /> component adds a separator between buttons.

Buttons with variant outline do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.

With Input

Buttons can be combined with input fields in a button group.

With Menu

A menu component can be integrated within a button group for additional options.

With Popover

A popover trigger button can be added to a button group for contextual information or actions.

API Reference

ButtonGroup

Groups buttons together. Uses fieldset for accessibility when applicable.

ButtonGroupSeparator

Visual divider between buttons. Uses <Separator /> internally.