# ButtonGroup component for Stripe Apps

Use ButtonGroup to handle the layout for multiple buttons and collapse them into an overflow menu when space is limited.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/buttongroup?app-sdk-version=8.

To add the `ButtonGroup` component to your app:

```js
import {ButtonGroup} from '@stripe/ui-extension-sdk/ui';
```

### ButtonGroup props

| Property      | Type                                                                                                                                                                           |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`    | (Required)
  `React.ReactNode`

  One or more `Button` components.                                                                                                             |
| `collapse`    | (Optional)
  `("auto" | "none") | undefined`

  Controls whether or not `Buttons` within the group collapse when there isn’t enough space to display them without overflowing. |
| `direction`   | (Optional)
  `("row" | "column") | undefined`

  Controls which axis the `ButtonGroup` should span.                                                                            |
| `menuTrigger` | (Optional)
  `React.ReactNode`

  Allows overriding the trigger element used for an overflow menu. Must be a component that supports press events.                             |

## Overflow collapsing 

Button groups responsively adapt to the space available in their container by collapsing buttons into an overflow menu. Primary buttons collapse after any other buttons, and larger buttons collapse first.

### Disabling collapse behavior

If you want to turn off collapsing behavior, you can specify the `collapse="none"` prop value.

## Customizing the overflow menu trigger 

You can replace the default overflow menu trigger with any element that supports `onPress` events. To adhere to best practices, remember to add an appropriate `aria-label` to your trigger element if it doesn’t contain descriptive text.


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/buttongroup?app-sdk-version=9.

To add the `ButtonGroup` component to your app:

```js
import {ButtonGroup} from '@stripe/ui-extension-sdk/ui';
```

### ButtonGroup props

| Property      | Type                                                                                                                                                                           |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `children`    | (Required)
  `React.ReactNode`

  One or more `Button` components.                                                                                                             |
| `collapse`    | (Optional)
  `("auto" | "none") | undefined`

  Controls whether or not `Buttons` within the group collapse when there isn’t enough space to display them without overflowing. |
| `direction`   | (Optional)
  `("row" | "column") | undefined`

  Controls which axis the `ButtonGroup` should span.                                                                            |
| `menuTrigger` | (Optional)
  `React.ReactNode`

  Allows overriding the trigger element used for an overflow menu. Must be a component that supports press events.                             |

## Overflow collapsing 

Button groups responsively adapt to the space available in their container by collapsing buttons into an overflow menu. Primary buttons collapse after any other buttons, and larger buttons collapse first.

### Disabling collapse behavior

If you want to turn off collapsing behavior, you can specify the `collapse="none"` prop value.

## Customizing the overflow menu trigger 

You can replace the default overflow menu trigger with any element that supports `onPress` events. To adhere to best practices, remember to add an appropriate `aria-label` to your trigger element if it doesn’t contain descriptive text.


## See also

- [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md)
- [Style your app](https://docs.stripe.com/stripe-apps/style.md)
- [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)