Components

Button Group

Joins related buttons into one segmented control divided by shared 1px ink rules, with a text cell and separator.

Install

bash

npx shadcn add @eloquent/button-group

Usage

tsx

import { Button } from "@/components/ui/button";
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui/button-group";

<ButtonGroup aria-label="Edition navigation">
  <Button variant="outline">Previous</Button>
  <Button variant="outline">Today</Button>
  <Button variant="outline">Next</Button>
</ButtonGroup>

<ButtonGroup aria-label="Edit">
  <Button variant="ghost">Cut</Button>
  <ButtonGroupSeparator />
  <Button variant="ghost">Copy</Button>
</ButtonGroup>

Name the group with aria-label or aria-labelledby. ButtonGroupText takes a render prop (upstream asChild), for example render={<label htmlFor="q" />}.

States

Edition

State	Treatment
Joined	Each member overlaps its neighbour's 1px ink border, so there is one shared rule and no gap
Press, pressed, disabled	Those of each member button
Focus	2px ink outline, 2px offset; the focused member sits above its neighbours
Text cell	`tint-1` fill with a 1px ink border; not interactive
Separator	A 1px ink rule that takes its own space, for ghost or link members

Keyboard

Key	Action
Tab / Shift+Tab	Move between members; each member is its own tab stop (disabled members are skipped)
Enter / Space	Activate the focused button

Vietnamese

Ink adaptation

Upstream removes radius from inner edges and adds shadows; here there is neither. Members share overlapping 1px ink rules, the text cell is a tint-1 panel, and no hover effect is added. Uses @eloquent/button for its members.