Skip to main content
Button Group component preview (light)
  • 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

sabo/src/components/ui/button-group.tsx
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

​
orientation
string
horizontal (default) | vertical
​
ButtonGroupText.asChild
boolean
Render text wrapper as child element (useful for links).

​
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.