Actions

Button group

Groups related buttons. `attached` joins them into a single segmented control.

Server safeSource

Import

import { ButtonGroup } from '@the_viveksingh/vivek-ui'

Related actions

attached merges the borders into a segmented control. label names the group for assistive technology, since a bare row of buttons has no collective name.

<ButtonGroup attached label="Text alignment">
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

<ButtonGroup label="Form actions">
  <Button>Save</Button>
  <Button variant="ghost">Cancel</Button>
</ButtonGroup>

Vertical

<ButtonGroup orientation="vertical" attached label="Row actions">
  <Button variant="outline">Duplicate</Button>
  <Button variant="outline">Archive</Button>
  <Button variant="outline">Delete</Button>
</ButtonGroup>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for ButtonGroup
Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	—	—
`attached`	`boolean`	—	Butt the buttons together into one seam-free control.
`label`	`string`	—	Accessible name for the group, e.g. "Text alignment".

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

ButtonGroup carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.