Skip to content
Cuelark UI
Actions

Button Group

Join buttons into one control: split buttons, toolbars, steppers.

Button Group joins buttons into a single control. Inner corners square off, borders merge, and the focused button rises above its neighbours so its focus ring is never clipped. Use it for split buttons, segmented toolbars and previous/next pairs.

Preview

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/button-group.json

The CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/button-group.

Usage

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

<ButtonGroup>
  <Button variant="outline">Archive</Button>
  <Button variant="outline">Snooze</Button>
</ButtonGroup>

API reference

ButtonGroup

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Direction.

ButtonGroupSeparator

Accessibility

  • role=group; add aria-label when the group's purpose is not obvious.

FAQ

Also searched as: react button group · split button react · shadcn button group · toolbar buttons · segmented buttons