# Composant de bannière pour les applications Stripe

Utilisez la bannière afin d'afficher des alertes ou messages que vous souhaitez rendre explicites pour l'utilisateur.

# v8

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

Pour ajouter le composant `Banner` à votre application :

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

## Présentation

Les bannières occupent la largeur de leur conteneur parent. Elles sont pertinentes pour les informations importantes à afficher de manière persistante, notamment lorsqu’une saisie est requise de la part de l’utilisateur.

Trois types prédéfinis de bannière sont disponibles :

- **Par défaut**
- **Attention**
- **Critique**

Voici un aperçu des trois types prédéfinis de bannière :

### Propriétés des bannières

| Propriété     | Type                                                              |
| ------------- | ----------------------------------------------------------------- |
| `actions`     | (Facultatif)
  `React.ReactNode`                                  |
| `description` | (Facultatif)
  `React.ReactNode`                                  |
| `onDismiss`   | (Facultatif)
  `(() => void) | undefined`                         |
| `title`       | (Facultatif)
  `React.ReactNode`                                  |
| `type`        | (Facultatif)
  `("default" | "caution" | "critical") | undefined` |

## onDismiss

Les bannières peuvent implémenter un bouton « Ignorer » ; ajoutez un gestionnaire de clic à `onDismiss` pour que le bouton **Cacher la bannière** s’affiche :

## Actions

Les bannières implémentent également une propriété `actions` qui vous permet d’ajouter des boutons d’action à la bannière :


# v9

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

Pour ajouter le composant `Banner` à votre application :

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

## Présentation

Les bannières occupent la largeur de leur conteneur parent. Elles sont pertinentes pour les informations importantes à afficher de manière persistante, notamment lorsqu’une saisie est requise de la part de l’utilisateur.

Trois types prédéfinis de bannière sont disponibles :

- **Par défaut**
- **Attention**
- **Critique**

Voici un aperçu des trois types prédéfinis de bannière :

### Propriétés des bannières

| Propriété     | Type                                                              |
| ------------- | ----------------------------------------------------------------- |
| `actions`     | (Facultatif)
  `React.ReactNode`                                  |
| `description` | (Facultatif)
  `React.ReactNode`                                  |
| `onDismiss`   | (Facultatif)
  `(() => void) | undefined`                         |
| `title`       | (Facultatif)
  `React.ReactNode`                                  |
| `type`        | (Facultatif)
  `("default" | "caution" | "critical") | undefined` |

## onDismiss

Les bannières peuvent implémenter un bouton « Ignorer » ; ajoutez un gestionnaire de clic à `onDismiss` pour que le bouton **Cacher la bannière** s’affiche :

## Actions

Les bannières implémentent également une propriété `actions` qui vous permet d’ajouter des boutons d’action à la bannière :


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