# Bannerkomponente für Stripe-Apps

Verwenden Sie das Banner, um eine Vielzahl von Warnungen und Meldungen anzuzeigen, auf die Sie Nutzer/innen aufmerksam machen möchten.

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

So fügen Sie Ihrer App die `Banner` Komponente hinzu:

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

## Übersicht

Banner nehmen die Breite des übergeordneten Containers ein. Banner eignen sich für wichtige Informationen, die Nutzereingaben und eine dauerhafte Anzeige erfordern.

Für Banner gibt es drei Voreinstellungen:

- **Standard**
- **Vorsicht**
- **Kritisch**

Nachfolgend sehen Sie eine Vorschau der drei Voreinstellungen für ein Banner:

### Banner-Eigenschaften

| Eigenschaft   | Typ                                                             |
| ------------- | --------------------------------------------------------------- |
| `actions`     | (Optional)
  `React.ReactNode`                                  |
| `description` | (Optional)
  `React.ReactNode`                                  |
| `onDismiss`   | (Optional)
  `(() => void) | undefined`                         |
| `title`       | (Optional)
  `React.ReactNode`                                  |
| `type`        | (Optional)
  `("default" | "caution" | "critical") | undefined` |

## onDismiss

Bannern kann eine Schaltfläche zum Verwerfen hinzugefügt werden. Fügen Sie einen Click-Handler zu `onDismiss` hinzu, damit die Schaltfläche **Banner ausblenden** angezeigt wird:

## Aktionen

Banner können auch mit der Eigenschaft `actions` versehen werden, mit der Sie dem Banner Aktionsschaltflächen hinzufügen können:


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

So fügen Sie Ihrer App die `Banner` Komponente hinzu:

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

## Übersicht

Banner nehmen die Breite des übergeordneten Containers ein. Banner eignen sich für wichtige Informationen, die Nutzereingaben und eine dauerhafte Anzeige erfordern.

Für Banner gibt es drei Voreinstellungen:

- **Standard**
- **Vorsicht**
- **Kritisch**

Nachfolgend sehen Sie eine Vorschau der drei Voreinstellungen für ein Banner:

### Banner-Eigenschaften

| Eigenschaft   | Typ                                                             |
| ------------- | --------------------------------------------------------------- |
| `actions`     | (Optional)
  `React.ReactNode`                                  |
| `description` | (Optional)
  `React.ReactNode`                                  |
| `onDismiss`   | (Optional)
  `(() => void) | undefined`                         |
| `title`       | (Optional)
  `React.ReactNode`                                  |
| `type`        | (Optional)
  `("default" | "caution" | "critical") | undefined` |

## onDismiss

Bannern kann eine Schaltfläche zum Verwerfen hinzugefügt werden. Fügen Sie einen Click-Handler zu `onDismiss` hinzu, damit die Schaltfläche **Banner ausblenden** angezeigt wird:

## Aktionen

Banner können auch mit der Eigenschaft `actions` versehen werden, mit der Sie dem Banner Aktionsschaltflächen hinzufügen können:


## See also

- [Entwurfsmuster als Orientierung](https://docs.stripe.com/stripe-apps/patterns.md)
- [App gestalten](https://docs.stripe.com/stripe-apps/style.md)
- [Test der Nutzeroberfläche](https://docs.stripe.com/stripe-apps/ui-testing.md)