Button Group

Glass wrapper that keeps related actions aligned. Mix buttons, text segments, and separators to form compact toolbars or segmented controls.

Toolbar examples

Deployment Controls
Combine ghost buttons with separators for a compact command strip.
REGION
VIEW

Installation

pnpm dlx shadcn@latest add @omni/button-group

Usage

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@/components/ui/button-group"
<ButtonGroup>
  <Button variant="ghost">Deploy</Button>
  <ButtonGroupSeparator />
  <Button variant="ghost">Preview</Button>
  <ButtonGroupSeparator />
  <Button variant="ghost">Promote</Button>
</ButtonGroup>