Button Group

A container that groups related buttons together with consistent styling.

Preview

Installation

Usage

import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui/button-group"
import { Button } from "@/components/ui/button"
<ButtonGroup>
  <Button>Previous</Button>
  <Button>Next</Button>
</ButtonGroup>

Accessibility

  • The ButtonGroup component has the role attribute set to group.
  • Use Tab to navigate between buttons.
  • Use aria-label or aria-labelledby to label the button group.

API Reference

ButtonGroup

Container that groups related buttons with consistent styling.

ButtonGroupSeparator

A separator that visually divides buttons within a ButtonGroup.

Examples

Orientation

Sizes

Split