ButtonGroup

Attach related buttons and controls into a single connected bar. ButtonGroup is a layout wrapper — it doesn’t style its children, it collapses the inner corners and shared borders so that buttons, dropdown triggers, selects, and inputs read as one unit.

Drop any focusable children inside. The group flattens the radii between adjacent items and rounds only the outer edges, so an outline Button row, a split action, or a labeled input all snap together without per-child class wrangling.

Default

A row of outline buttons becomes one connected control. The first button keeps its left corners, the last keeps its right corners, and every shared border between them collapses to a single hairline.

import { Button, ButtonGroup } from "@vesyl/ui-next";

export default function ButtonGroupDefault() {
  return (
    <ButtonGroup>
      <Button variant="outline">Print label</Button>
      <Button variant="outline">Buy postage</Button>
      <Button variant="outline">Void shipment</Button>
    </ButtonGroup>
  );
}

With icons

Icon-only buttons (size="icon-sm") pack into a compact toolbar — the row-action pattern for an order or shipment table. Give each button an aria-label since there’s no visible text.

import { Button, ButtonGroup } from "@vesyl/ui-next";
import { Copy, Pencil, Trash2 } from "lucide-react";

export default function ButtonGroupIcons() {
  return (
    <ButtonGroup>
      <Button variant="outline" size="icon-sm" aria-label="Edit order">
        <Pencil />
      </Button>
      <Button variant="outline" size="icon-sm" aria-label="Duplicate order">
        <Copy />
      </Button>
      <Button variant="outline" size="icon-sm" aria-label="Delete order">
        <Trash2 />
      </Button>
    </ButtonGroup>
  );
}

Vertical orientation

Set orientation="vertical" to stack the children. The group switches to a column, collapses the top/bottom corners between items, and rounds only the top of the first and bottom of the last — handy for a stepped status menu.

import { Button, ButtonGroup } from "@vesyl/ui-next";

export default function ButtonGroupVertical() {
  return (
    <ButtonGroup orientation="vertical">
      <Button variant="outline">Mark as picked</Button>
      <Button variant="outline">Mark as packed</Button>
      <Button variant="outline">Mark as shipped</Button>
    </ButtonGroup>
  );
}

Split button

Pair a primary Button with a DropdownMenu trigger to make a split action — the common label is the default, the chevron exposes the variants. The group keeps the two seams flush.

import {
  Button,
  ButtonGroup,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@vesyl/ui-next";
import { ChevronDown } from "lucide-react";

export default function ButtonGroupSplit() {
  return (
    <ButtonGroup>
      <Button>Buy label</Button>
      <DropdownMenu>
        <DropdownMenuTrigger
          render={
            <Button size="icon" aria-label="More label options">
              <ChevronDown />
            </Button>
          }
        />
        <DropdownMenuContent align="end">
          <DropdownMenuItem>Buy and print</DropdownMenuItem>
          <DropdownMenuItem>Buy and schedule pickup</DropdownMenuItem>
          <DropdownMenuItem>Save as draft</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </ButtonGroup>
  );
}

With text label

ButtonGroupText is a non-interactive cell — a muted, bordered label you can attach to an Input or Button for a unit, prefix, or addon. Here it tags a weight field with its unit.

import { Button, ButtonGroup, ButtonGroupText, Input } from "@vesyl/ui-next";

export default function ButtonGroupTextDemo() {
  return (
    <ButtonGroup>
      <ButtonGroupText>oz</ButtonGroupText>
      <Input
        type="number"
        defaultValue="12.5"
        className="w-24"
        aria-label="Package weight"
      />
      <Button variant="outline">Save weight</Button>
    </ButtonGroup>
  );
}

With separator

ButtonGroupSeparator drops a thin divider between children to split the group into logical clusters without breaking it into two bars. It defaults to a vertical rule (a horizontal one for vertical groups).

import { Button, ButtonGroup, ButtonGroupSeparator } from "@vesyl/ui-next";

export default function ButtonGroupSeparatorDemo() {
  return (
    <ButtonGroup>
      <Button variant="outline">Cancel</Button>
      <Button variant="outline">Save draft</Button>
      <ButtonGroupSeparator />
      <Button variant="outline">Buy label</Button>
    </ButtonGroup>
  );
}

Reference

ButtonGroup

The wrapper. Renders a <div role="group"> and extends the native div props.

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Lay children out in a row or a column; sets which corners collapse
`className`	`string`	—	Merged onto the wrapper

ButtonGroupText

A non-interactive label / addon cell. Extends the native div props and accepts render to swap the element.

Prop	Type	Default	Description
`render`	`ReactElement`	—	Render as a different element (base-ui slot)
`className`	`string`	—	Merged onto the cell

ButtonGroupSeparator

A divider between clusters. Extends Separator props.

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	Direction of the dividing rule
`className`	`string`	—	Merged onto the separator