ButtonGroup

ButtonGroup connects multiple buttons visually by removing the gap between them and sharing border-radius at the joints. Use it for toolbars, segmented controls, and action sets.

Interactive example#

Button Group · Live example

Week view

Switch the selected range and change the direction of the connected control.

The code uses shared demo presentation helpers. Their complete source and styling are included in the LLM build context.

Import#

TSX

import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '@clidey/ux';

Basic usage#

TSX

<ButtonGroup>
  <Button variant="outline">Cut</Button>
  <Button variant="outline">Copy</Button>
  <Button variant="outline">Paste</Button>
</ButtonGroup>

Vertical orientation#

TSX

<ButtonGroup orientation="vertical">
  <Button variant="outline">Top</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Bottom</Button>
</ButtonGroup>

With separator#

Use ButtonGroupSeparator to add a visual divider inside the group:

TSX

<ButtonGroup>
  <Button variant="outline">Bold</Button>
  <Button variant="outline">Italic</Button>
  <ButtonGroupSeparator />
  <Button variant="outline">Align Left</Button>
  <Button variant="outline">Align Center</Button>
  <Button variant="outline">Align Right</Button>
</ButtonGroup>

With label text#

Use ButtonGroupText to insert a non-interactive label or unit inside the group:

TSX

<ButtonGroup>
  <Input className="rounded-r-none border-r-0" placeholder="Amount" />
  <ButtonGroupText>USD</ButtonGroupText>
  <Button variant="outline">Convert</Button>
</ButtonGroup>

With catalog icons#

TSX

import { Button, ButtonGroup, IconDownload, IconCopy, IconArchive } from '@clidey/ux';

<ButtonGroup>
  <Button variant="outline" size="icon" aria-label="Download"><IconDownload /></Button>
  <Button variant="outline" size="icon" aria-label="Copy"><IconCopy /></Button>
  <Button variant="outline" size="icon" aria-label="Archive"><IconArchive /></Button>
</ButtonGroup>

Props#

ButtonGroup

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the button group.
`className`	`string`	—	Additional CSS classes.
`children`	`ReactNode`	—	`Button`, `ButtonGroupSeparator`, or `ButtonGroupText` elements.

ButtonGroupSeparator

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	Inherits from group	Separator direction.
`className`	`string`	—	Additional CSS classes.

ButtonGroupText

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`children`	`ReactNode`	—	Text or element to display.

Was this page helpful?