ComponentsUpdated Sep 9, 2026

Button Group

Joins adjacent Buttons into one control: shared corners, a divider between segments, and one variant and size for all of them.

Import

Source: packages/ui/src/components/button-group

tsx

import { ButtonGroup, Button } from '@highlight/ui'

Basic

Any number of Buttons. The first and last keep their outer corners.

tsx

import { ChevronDown, Copy, Share } from 'lucide-react'
import { Button, ButtonGroup } from '@highlight/ui'

export default function ButtonGroupBasic() {
  return (
    <div className="flex flex-col items-center gap-4">
      <ButtonGroup>
        <Button left={<Copy />}>Copy</Button>
        <Button aria-label="More" shape="square">
          <ChevronDown />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button left={<Copy />}>Copy</Button>
        <Button left={<Share />}>Share</Button>
        <Button aria-label="More" shape="square">
          <ChevronDown />
        </Button>
      </ButtonGroup>
    </div>
  )
}

Inherited variant and size

Set variant and size once on the group. A child can still override its own.

tsx

import { Check, ChevronDown, Copy } from 'lucide-react'
import { Button, ButtonGroup } from '@highlight/ui'

export default function ButtonGroupInherited() {
  return (
    <div className="flex flex-col items-center gap-4">
      <ButtonGroup variant="primary">
        <Button left={<Copy />}>Copy</Button>
        <Button aria-label="More" shape="square">
          <ChevronDown />
        </Button>
      </ButtonGroup>
      <ButtonGroup variant="success" size="small">
        <Button left={<Check />}>Copied</Button>
        <Button aria-label="More" shape="square">
          <ChevronDown />
        </Button>
      </ButtonGroup>
      <ButtonGroup variant="secondary" size="large">
        <Button left={<Copy />}>Copy</Button>
        <Button aria-label="More" shape="square" variant="danger">
          <ChevronDown />
        </Button>
      </ButtonGroup>
    </div>
  )
}

Props

Props added on top of the underlying element or Base UI part.

Prop	Type	Default	Description
`variant`	ButtonVariant	—	Applied to every child without its own variant. Also tints the dividers.
`size`	ButtonSize	—	Applied to every child without its own size.