Yugen UI

ButtonGroup

ButtonGroup joins adjacent buttons into one unified control for related actions.

Inner corners and overlapping borders are merged automatically (-ms-px in a row, -mt-px in a column). Use ButtonGroupSeparator when the buttons have no border (primary, subtle). Works with Button, ToggleButton and SplitButton.

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX
// npm install yugen-uiimport { ButtonGroup, ButtonGroupSeparator } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Vertical

orientation="vertical", often used for the zoom in / zoom out pair on a map or canvas.

Separator

Primary buttons have no border, so add ButtonGroupSeparator appearance="on-brand" between them.

With SplitButton

A SplitButton inside the group gets merged corners too.

Usage

Do
  • Only group closely related actions (undo/redo, zoom in/out).
  • Use the same appearance and size for every button in the group.
  • Add an aria-label to icon-only buttons.
Don't
  • Don't group more than 5 buttons. Consider a Toolbar or Menu.
  • Don't mix primary and secondary buttons in one group.

Props

Prop · TypeDefaultDescription
orientation"horizontal" | "vertical"Default: "horizontal"Button direction; corners and inner borders are merged automatically.
childrenReactNodeDefault: —Button, ToggleButton, SplitButton, ButtonGroupSeparator.
ButtonGroupSeparator.appearance"default" | "on-brand"Default: "default"on-brand between primary buttons.
ButtonGroupSeparator.orientation"vertical" | "horizontal"Default: "vertical"Opposite to the group's direction.