button-group | Kamod UI

Installation

Import ButtonGroup, ButtonGroupSeparator, and ButtonGroupText from `@/components/kamod-ui/button-group`.

pnpm add @kamod-ch/ui

Usage

Groups related actions with shared borders and focus rings; nest groups for spacing; pair with Input, InputGroup, Dropdown, Select, and Popover (shadcn Button Group pattern).

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

<ButtonGroup>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
</ButtonGroup>

Accessibility

The group uses role="group". Prefer aria-label or aria-labelledby so assistive tech knows what the control set does. Tab moves between focusable controls inside.

Button group vs toggle group

Use ButtonGroup for actions (submit, navigate, open menus). Use a toggle group pattern when buttons represent exclusive or multi selection state — Kamod exposes separate primitives for that use case.

Group text

Optional label text before actions, or ButtonGroupText asChild with Label for form fields.

Filter

Name

Orientation

Set orientation="vertical" for stacked controls (for example media + / −).

Size

Control density with each Button’s size prop (sm, default, lg, icon variants).

Nested

Nest ButtonGroup components to add gap between clusters while keeping flush joins inside each cluster.

Separator

Use ButtonGroupSeparator between solid (non-outline) buttons so the hierarchy stays clear. Outline buttons usually do not need a separator.

Split

Primary action plus a compact icon action, separated by ButtonGroupSeparator.

Input

Place a full-width Input beside a button; the group applies flex-1 to direct input children.

Input group

Pill-shaped bar with nested groups: icon button + InputGroup with addons (voice toggle example).

Dropdown

Split row: text button plus dropdown trigger sharing one continuous outline.

Select

Currency (or similar) Select next to an amount field and a send button.

Popover

Split control with a popover panel on the trailing chevron button.

API Reference

Props for ButtonGroup, ButtonGroupSeparator, and ButtonGroupText.

Button Group

Prop	Type	Default
orientation	`"horizontal" \| "vertical"`	`"horizontal"`
class	`string`	`-`

Button Group Separator

Prop	Type	Default
orientation	`"horizontal" \| "vertical"`	`"vertical"`
class	`string`	`-`

Button Group Text

Prop	Type	Default
asChild	`boolean`	`false`
class	`string`	`-`