ButtonGroup

import { ButtonGroup } from 'yarcl';

Buttons inside a group inherit size, color, variant and radius unless they set their own. Attached groups share borders, with a divider between solid buttons.

Previous12Next

Save

Copy linkEmail

<ButtonGroup aria-label="Pagination" variant="outline" color="neutral">
  <Button>Previous</Button>
  <Button>1</Button>
  <Button>2</Button>
  <Button>Next</Button>
</ButtonGroup>

<ButtonGroup aria-label="Share" attached={false} variant="soft" size="sm">
  <Button>Copy link</Button>
  <Button>Email</Button>
</ButtonGroup>

Accessibility

• Renders role="group". Give it an aria-label that describes the set of actions.

Props

Prop	Type	Default	Description
attached	boolean	true	Joins the buttons into one control with shared borders.
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
orientation	'horizontal' | 'vertical'	'horizontal'	Direction of the buttons.
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	Sizeconfig	config.defaults.size	Control size, from the sizes config.
variant	Variantconfig	config.defaults.variant	Style recipe, from the variants config.