Button Group

#Installation & usage

Use a button group when a few actions belong together and should read as one control: previous and next, a split button with its options, a search field with its button. For a set of options where one is chosen, use a Toggle Group. For a long, dense row of controls that should be one tab stop, use a Toolbar.

import { Button, ButtonGroup } from '@youj/react'

export function Pager() {
  return (
    <ButtonGroup aria-label="Pages">
      <Button variant="outline">Previous</Button>
      <Button variant="outline">Next</Button>
    </ButtonGroup>
  )
}

The group takes away the inner corners and the doubled border where members meet, and a focused member rises above its neighbors so its ring isn't clipped. Corners are start and end, not left and right, so a group mirrors in right-to-left layouts. Nest groups to make clusters with a gap between them. The API matches shadcn/ui's Button Group.

#Description

#Code