# Banner component for Stripe Apps

Use the Banner to show a variety of alerts or messages you want to make explicit to the user.

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

To add the `Banner` component to your app:

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

## Overview

Banners take up the width of their parent container. Banners are suitable for important information requiring user input and persistent display.

Banners come with three preset types:

- **Default**
- **Caution**
- **Critical**

The following shows a preview of the three preset types for a banner:

### Banner props

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

## onDismiss

Banners have the option of adding a dismiss button—add a click handler to `onDismiss` for the **Hide Banner** button to appear:

## Actions

Banners also take an `actions` prop that allows you to add action buttons to the Banner:


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

To add the `Banner` component to your app:

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

## Overview

Banners take up the width of their parent container. Banners are suitable for important information requiring user input and persistent display.

Banners come with three preset types:

- **Default**
- **Caution**
- **Critical**

The following shows a preview of the three preset types for a banner:

### Banner props

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

## onDismiss

Banners have the option of adding a dismiss button—add a click handler to `onDismiss` for the **Hide Banner** button to appear:

## Actions

Banners also take an `actions` prop that allows you to add action buttons to the Banner:


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