Button group

Joins related buttons, inputs and labels into one row with shared borders.

npx prodular-ui add button-group

Actions and split button

import { ArchiveIcon, ChevronDownIcon, ClockIcon, ReplyIcon } from "lucide-react"
import { Button } from "@/components/ui/button"import { ButtonGroup } from "@/components/ui/button-group"
export default function ButtonGroupDefault() {  return (    <div className="flex flex-wrap items-center justify-center gap-4">      <ButtonGroup aria-label="Conversation actions">        <Button variant="outline">          <ReplyIcon data-icon="inline-start" />          Reply        </Button>        <Button variant="outline">          <ClockIcon data-icon="inline-start" />          Snooze        </Button>        <Button variant="outline">          <ArchiveIcon data-icon="inline-start" />          Archive        </Button>      </ButtonGroup>      <ButtonGroup aria-label="Publish">        <Button>Publish</Button>        <Button size="icon" aria-label="More publish options" className="border-l border-l-primary-foreground/20">          <ChevronDownIcon />        </Button>      </ButtonGroup>    </div>  )}

With an input or text

https://

import { MinusIcon, PlusIcon } from "lucide-react"
import { Button } from "@/components/ui/button"import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group"import { Input } from "@/components/ui/input"
export default function ButtonGroupWithInput() {  return (    <div className="flex flex-col items-center gap-4">      <ButtonGroup className="w-full max-w-md">        <ButtonGroupText>https://</ButtonGroupText>        <Input defaultValue="hooks.northbeam.studio/tidewater" aria-label="Webhook URL" />        <Button variant="outline">Test</Button>      </ButtonGroup>      <ButtonGroup aria-label="Seats">        <Button variant="outline" size="icon" aria-label="Remove seat">          <MinusIcon />        </Button>        <ButtonGroupText className="w-14 justify-center bg-card text-foreground tabular-nums">24</ButtonGroupText>        <Button variant="outline" size="icon" aria-label="Add seat">          <PlusIcon />        </Button>      </ButtonGroup>    </div>  )}

Anatomy

<ButtonGroup aria-label="Conversation actions">  <Button variant="outline">Reply</Button>  <Button variant="outline">Archive</Button></ButtonGroup>

Guidance

Use it when

Two to four actions on the same object, such as Reply, Snooze, Archive.
A split button: a main action with a menu of variants.
An input with a fixed prefix and an action, or a stepper.

Avoid

Mixing variants inside one group, other than a split button.
Choosing between options. Use ToggleGroup.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Use the same variant and size for every button in a group.
Give the group an aria-label that names what the actions act on.
Use ButtonGroupText for static text such as a protocol or a count.
Nest ButtonGroups to put a gap between clusters.

API

ButtonGroup

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	Direction. Borders and corners adjust.

ButtonGroupText

Prop	Type	Default	Description
render	ReactElement		Render as another element, such as a Label.

ButtonGroupSeparator

Prop	Type	Default	Description
orientation	"vertical" \| "horizontal"	"vertical"	A hairline between buttons that have no border.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add button-group# or, with the registry in components.jsonnpx shadcn@latest add @prodular/button-group