ButtonGroup

Groups related buttons into a connected control with shared borders. Works with Button, IconButton, and mixes of both.

Examples

Default

Wrap adjacent Buttons so they render as one segmented strip.

import { Button, ButtonGroup } from '@var-ui/react';

<ButtonGroup>
  <Button intent="secondary">One</Button>
  <Button intent="secondary">Two</Button>
</ButtonGroup>

With icons

Mix IconButton and Button children when the group needs compact icon actions alongside a labeled control.

import { Button, ButtonGroup, IconButton } from '@var-ui/react';

<ButtonGroup>
  <IconButton name="search" aria-label="Search" />
  <IconButton name="copy" aria-label="Copy" />
  <Button intent="secondary">More</Button>
</ButtonGroup>

Props

Accessibility

Renders a role="group" container. Each child keeps its own accessible name — use aria-label on icon-only members. Focus stays on individual buttons (no roving tabindex on the group itself).