# Composant ButtonGroup pour les applications Stripe

Utilisez ButtonGroup pour gérer la mise en page de plusieurs boutons et les réduire en menu de débordement lorsque l'espace est limité.

# 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.

Pour ajouter le composant `ButtonGroup` à votre application :

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

### Propriétés de ButtonGroup

| Propriété     | Type                                                                                                                                                                                      |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`    | (Obligatoire)
  `React.ReactNode`

  Un ou plusieurs composants `Button`.                                                                                                                 |
| `collapse`    | (Facultatif)
  `("auto" | "none") | undefined`

  Contrôle si les `Buttons` du groupe se réduisent ou non lorsqu’il n’y a pas assez d’espace pour les afficher sans qu’ils débordent.     |
| `direction`   | (Facultatif)
  `("row" | "column") | undefined`

  Contrôle l’axe sur lequel le `ButtonGroup` doit s’étendre.                                                                             |
| `menuTrigger` | (Facultatif)
  `React.ReactNode`

  Permet de remplacer l’élément déclencheur utilisé pour un menu déroulant. Il doit s’agir d’un composant prenant en charge les événements de pression. |

## Réduction dans un menu de débordement

Les groupes de boutons s’adaptent à l’espace disponible dans leur conteneur en réduisant les boutons en un menu de débordement. Les boutons primaires sont réduits après tous les autres boutons, tandis que les boutons les plus grands sont réduits en premier.

### Désactiver le comportement de réduction

Si vous souhaitez désactiver le comportement de réduction, vous pouvez spécifier la valeur de la propriété `collapse="none"`.

## Personnaliser le déclencheur du menu de débordement

Vous pouvez remplacer le déclencheur par défaut du menu de débordement par n’importe quel élément prenant en charge les événements `onPress`. Pour vous conformer aux bonnes pratiques, n’oubliez pas d’ajouter un `aria-label` approprié à votre élément déclencheur s’il ne contient pas de texte descriptif.


# 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.

Pour ajouter le composant `ButtonGroup` à votre application :

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

### Propriétés de ButtonGroup

| Propriété     | Type                                                                                                                                                                                      |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children`    | (Obligatoire)
  `React.ReactNode`

  Un ou plusieurs composants `Button`.                                                                                                                 |
| `collapse`    | (Facultatif)
  `("auto" | "none") | undefined`

  Contrôle si les `Buttons` du groupe se réduisent ou non lorsqu’il n’y a pas assez d’espace pour les afficher sans qu’ils débordent.     |
| `direction`   | (Facultatif)
  `("row" | "column") | undefined`

  Contrôle l’axe sur lequel le `ButtonGroup` doit s’étendre.                                                                             |
| `menuTrigger` | (Facultatif)
  `React.ReactNode`

  Permet de remplacer l’élément déclencheur utilisé pour un menu déroulant. Il doit s’agir d’un composant prenant en charge les événements de pression. |

## Réduction dans un menu de débordement

Les groupes de boutons s’adaptent à l’espace disponible dans leur conteneur en réduisant les boutons en un menu de débordement. Les boutons primaires sont réduits après tous les autres boutons, tandis que les boutons les plus grands sont réduits en premier.

### Désactiver le comportement de réduction

Si vous souhaitez désactiver le comportement de réduction, vous pouvez spécifier la valeur de la propriété `collapse="none"`.

## Personnaliser le déclencheur du menu de débordement

Vous pouvez remplacer le déclencheur par défaut du menu de débordement par n’importe quel élément prenant en charge les événements `onPress`. Pour vous conformer aux bonnes pratiques, n’oubliez pas d’ajouter un `aria-label` approprié à votre élément déclencheur s’il ne contient pas de texte descriptif.


## See also

- [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md)
- [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md)
- [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)