# ButtonGroup

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

## Installation

```tsx
import { ButtonGroup } from 'uxp/components';
```

## Signature

```tsx
const ButtonGroup: React.FunctionComponent<ButtonGroupProps>
```

## Examples

```tsx
<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)}
/>
```

```tsx
<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\[\]](https://help.iviva.com/uxp/v5/additional-resources/types/buttongroupitem)           | Yes       | -             | -             |
| activeId      | string                                                                                                    | No        | -             | -             |
| variant       | [ButtonComponentVarient](https://help.iviva.com/uxp/v5/additional-resources/types/buttoncomponentvarient) | No        | -             | -             |
| className     | string                                                                                                    | No        | -             | -             |
| styles        | React.CSSProperties                                                                                       | No        | -             | -             |
| onButtonClick | (buttonId: string) => void                                                                                | No        | -             | -             |

## Related Types

* [ButtonGroupProps](https://help.iviva.com/uxp/v5/additional-resources/types/buttongroupprops)
* [ButtonGroupItem](https://help.iviva.com/uxp/v5/additional-resources/types/buttongroupitem)
* [ButtonComponentProps](https://help.iviva.com/uxp/v5/additional-resources/types/buttoncomponentprops)
* [ButtonIcon](https://help.iviva.com/uxp/v5/additional-resources/types/buttonicon)
* [PHIconProp](https://help.iviva.com/uxp/v5/additional-resources/types/phiconprop)
* [PHIconPrefix](https://help.iviva.com/uxp/v5/additional-resources/types/phiconprefix)
* [ButtonComponentType](https://help.iviva.com/uxp/v5/additional-resources/types/buttoncomponenttype)
* [ButtonComponentVarient](https://help.iviva.com/uxp/v5/additional-resources/types/buttoncomponentvarient)
* [DropdownPosition](https://help.iviva.com/uxp/v5/additional-resources/types/dropdownposition)