Group

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/group

Installing Group also installs Separator, which GroupSeparator uses.

UsageCopy Anchor Link

import { Button } from "@/components/ui/button";
import { Group, GroupSeparator } from "@/components/ui/group";

<Group aria-label="Text alignment">
  <Button variant="outline">Left</Button>
  <GroupSeparator />
  <Button variant="outline">Right</Button>
</Group>;

Put a GroupSeparator between every pair of controls, including outline buttons. It draws the divider and the focus state.

With an inputCopy Anchor Link

Use GroupText for a prefix or suffix. Render it as a Label so clicking it focuses the input.

VerticalCopy Anchor Link

Set orientation="vertical" on the group and orientation="horizontal" on its separators.

Nested groupsCopy Anchor Link

Groups inside a group get space between them.

AccessibilityCopy Anchor Link

Group has role="group". Name it with aria-label or aria-labelledby. Each control stays its own Tab stop.

Group is for controls that do something, like a toolbar of actions. For controls that switch something on or off, use a toggle group.

API referenceCopy Anchor Link

Group and GroupText accept every native <div> attribute, and GroupText also accepts render. GroupSeparator accepts every Base UI Separator prop. They are also exported as ButtonGroup, ButtonGroupText, and ButtonGroupSeparator.

GroupCopy Anchor Link

GroupSeparatorCopy Anchor Link

GroupTextCopy Anchor Link