Button Group

• Location: sabo/src/components/ui/button-group.tsx

​

When to use

• Group related actions tightly with shared borders and spacing.
• Useful for segmented controls, filter bars, or adjacent actions.

​

Usage

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

export function Example() {
  return (
    <ButtonGroup>
      <Button variant="outline">Left</Button>
      <ButtonGroupSeparator />
      <Button variant="outline">Right</Button>
      <ButtonGroupText className="ml-2">More</ButtonGroupText>
    </ButtonGroup>
  );
}

​

Key props

​

Styling tip

• The group composes borders automatically; keep children border‑consistent (variant=“outline” works well).
• Add separators with ButtonGroupSeparator to divide controls.

​

Accessibility

• The container uses role=“group”. Provide context with nearby labels or headings.