Button Group

Use matching Button variants and sizes in a group so the joined corners line up.

You might be looking for:

• Input Group

  Icons, text, or buttons attached to an input.

Examples

Split action

A primary action plus a menu. Square the icon button to the text-button height so the two ramps (44px icon / 36px text) don't step.

Playground

<ButtonGroup> <Button>Save</Button> <Button>Publish</Button></ButtonGroup>

Usage

import { Button } from "@sophic/portal-ui/components/ui/button";
import { ButtonGroup } from "@sophic/portal-ui/components/ui/button-group";

<ButtonGroup>
  <Button>Save</Button>
  <Button>Publish</Button>
</ButtonGroup>

ButtonGroupSeparator sits between segments. ButtonGroupText is a static prefix or suffix next to a button — not a text field.

Props

ButtonGroup also accepts every native <div> attribute. ButtonGroupSeparator accepts Separator's orientation plus its other props. ButtonGroupText accepts asChild plus native <div> attributes.

Changelog

• 19 August 2026 — “You might be looking for” map to Input Group. Full notes
• 18 August 2026 — Docs page added (was in the library undocumented). Full notes
• 18 August 2026 — Styles live in a CSS module; look unchanged. Full notes