ButtonGroup

beta

The ButtonGroup component allows you to group multiple buttons together, either horizontally or vertically. It is useful for organizing related actions.

Usage

import { Button, ButtonGroup } from '@harnessio/ui/components'

//...

return (
  <ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
  </ButtonGroup>
)

API Reference

<ButtonGroup
  direction="horizontal"   // [OPTIONAL] Direction of the button group, can be 'horizontal' or 'vertical'
  className="custom-class" // [OPTIONAL] Custom class name
  spacing="4"              // [OPTIONAL] Spacing between the buttons
  verticalAlign="center"   // [OPTIONAL] Vertical alignment of the buttons when the direction is set to vertical
>
  {/* Buttons */}
</ButtonGroup>

Prop	Required	Default	Type
children	true		ReactNode
direction	false	horizontal	'horizontal' \| 'vertical'
className	false		string
spacing	false	4	string
verticalAlign	false		string