# Stripe Apps の Banner コンポーネント

Banner (バナー) を使用して、ユーザーに明確に示したいさまざまなアラートやメッセージを表示します。

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

`Banner` コンポーネントをアプリに追加するには、以下のようにします。

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

## 概要

バナーには親コンテナーの幅が使用されます。バナーは、ユーザーによる入力と永続的な表示を必要とする重要な情報に適しています。

バナーには、事前設定された次の 3 つのタイプがあります。

- **デフォルト**
- **注意**
- **重大**

事前設定された 3 タイプのバナーのプレビューを以下に示します。

### バナーのプロパティー

| プロパティー        | タイプ                                                          |
| ------------- | ------------------------------------------------------------ |
| `actions`     | (オプション)
  `React.ReactNode`                                  |
| `description` | (オプション)
  `React.ReactNode`                                  |
| `onDismiss`   | (オプション)
  `(() => void) | undefined`                         |
| `title`       | (オプション)
  `React.ReactNode`                                  |
| `type`        | (オプション)
  `("default" | "caution" | "critical") | undefined` |

## onDismiss

バナーには閉じるボタンを追加することもできます。**バナーを非表示にする**ボタンを表示するには、クリックハンドラーを `onDismiss` に追加します。

## Actions

バナーに `actions` プロパティを指定すると、アクションボタンを追加することもできます。


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

`Banner` コンポーネントをアプリに追加するには、以下のようにします。

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

## 概要

バナーには親コンテナーの幅が使用されます。バナーは、ユーザーによる入力と永続的な表示を必要とする重要な情報に適しています。

バナーには、事前設定された次の 3 つのタイプがあります。

- **デフォルト**
- **注意**
- **重大**

事前設定された 3 タイプのバナーのプレビューを以下に示します。

### バナーのプロパティー

| プロパティー        | タイプ                                                          |
| ------------- | ------------------------------------------------------------ |
| `actions`     | (オプション)
  `React.ReactNode`                                  |
| `description` | (オプション)
  `React.ReactNode`                                  |
| `onDismiss`   | (オプション)
  `(() => void) | undefined`                         |
| `title`       | (オプション)
  `React.ReactNode`                                  |
| `type`        | (オプション)
  `("default" | "caution" | "critical") | undefined` |

## onDismiss

バナーには閉じるボタンを追加することもできます。**バナーを非表示にする**ボタンを表示するには、クリックハンドラーを `onDismiss` に追加します。

## Actions

バナーに `actions` プロパティを指定すると、アクションボタンを追加することもできます。


## See also

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)