Skip to content
github

Button Group

The ButtonGroup component allows you to group multiple buttons together, either horizontally or vertically. It is useful for organizing related actions. The button data is passed via the buttonsProps prop, which should contain an array of props for each individual button.

For a group of icon-only buttons, see the icon-only Button Group.

Installation

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


return (
  <ButtonGroup
    buttonsProps={[
      { children: 'Button', onClick: () => { console.log('Button 1') } },
      { children: 'Button', onClick: () => { console.log('Button 2') } },
      { children: 'Button', onClick: () => { console.log('Button 3') } }
    ]}
  />
)

Layout Orientation

The ButtonGroup component accepts an orientation prop, which defines the layout direction: either horizontal or vertical.

Sizes

The ButtonGroup component accepts a size prop to control its overall dimensions. Supported values are: default, sm, and xs.

With Dropdown

Within buttonsProps, you can provide a dropdownProps property to define the dropdown content for a specific button.