ButtonGroup

A component that renders a group of buttons with optional dropdown support.

Installation

import { ButtonGroup } from 'uxp/components';

Signature

const ButtonGroup: React.FunctionComponent<ButtonGroupProps>

Examples

<ButtonGroup
  buttons={[
    { id: 'add', title: 'Add', leftIcon: 'fas fa-plus' },
    { id: 'edit', title: 'Edit', leftIcon: 'fas fa-edit' }
  ]}
  activeId="add"
  onButtonClick={(id) => console.log('Clicked:', id)}
/>

<ButtonGroup
  buttons=[
    { id: 'add', title: 'Add', leftIcon: 'fas fa-plus', onClick: () => console.log('Add clicked') },
    {
      id: 'more',
      title: 'More',
      leftIcon: 'fas fa-ellipsis-h',
      dropdownContent: (
        <div>
          <div>Option 1</div>
          <div>Option 2</div>
        </div>
      ),
      dropdownPosition: 'bottom-right',
      showAnchor: true
    }
  ]
  variant="primary"
  activeId="add"
  className="custom-button-group"
  styles={{ margin: '10px' }}
  onButtonClick={(id) => console.log('Button clicked:', id)}
/>

Properties

Name	Type	Mandatory	Default Value	Example Value
buttons	ButtonGroupItem[]	Yes	-	-
activeId	string	No	-	-
variant	ButtonComponentVarient	No	-	-
className	string	No	-	-
styles	React.CSSProperties	No	-	-
onButtonClick	(buttonId: string) => void	No	-	-

Related Types

• ButtonGroupProps

• ButtonGroupItem

• ButtonComponentProps

• ButtonIcon

• PHIconProp

• PHIconPrefix

• ButtonComponentType

• ButtonComponentVarient

• DropdownPosition