Rime

ButtonGroup

Joins Buttons and IconButtons into one segmented row or column with shared outer corners.

ButtonGroup shapes related actions into one control: the outer corners keep the buttons' radius, the joins between them are square, and neighbouring edges share a single hairline. It only shapes; each button keeps its own variant, size, loading and disabled state.

Use it for a split button (a primary action plus a chevron for its options), a pair of previous and next buttons, or a short set of related secondary actions. For a choice that stays selected, use ToggleGroup or SegmentedControl instead.

Installation

npx shadcn@latest add KezLahd/rime/button-group

Also installs: base.

Usage

import { Button, ButtonGroup } from "@/components/ui";

<ButtonGroup aria-label="Invoice actions">
  <Button variant="secondary">Archive</Button>
  <Button variant="secondary">Report</Button>
</ButtonGroup>

Examples

Groups and a split button

Vertical

API

Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.

ButtonGroup

ButtonGroup props
PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"horizontal (default) joins left to right; vertical stacks top to bottom.

Also accepts the native attributes of AriaAttributes, DOMAttributes, HTMLAttributes.

Theme tokens

Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.

ButtonGroup per-component tokens
TokenDefaultLive value
--button-group-join0…

Accessibility

  • Renders role="group" with aria-orientation. Give it an aria-label that names the set ("Invoice actions").
  • Every button stays a real, separately focusable button in reading order; hover and focus lift the button over its neighbours so its focus ring is drawn whole.

Do and don't

Do

  • Keep a group to one variant, except a split button's primary half.
  • Group two to five actions that belong together.

Don't

  • Don't use a ButtonGroup for a selected state; that is ToggleGroup or SegmentedControl.
  • Don't put two primary buttons in one group.

For AI agents

This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.

Open button-group.md

Related: button, toggle-group