---
title: Banner
description: Banners inform merchants about important changes or persistent conditions.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/banner
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/banner.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/banner.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/banner.md#guidelines)

# Banner

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

Banners inform merchants about important changes or persistent conditions. Use this component if you need to communicate to merchants in a prominent way.

[Learn more about best practices and guidelines on using Banners](https://polaris.shopify.com/components/feedback-indicators/banner#best-practices).

##### JavaScript

```ts
import {extend, Text, Banner} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const banner = root.createComponent(Banner, {
    action: {
      onAction: () => console.log('Pressed the action'),
      content: 'Press me',
    },
    status: 'warning',
    title: 'This is a warning',
    onDismiss: () => console.log('Closed'),
  });

  const bannerText = root.createComponent(Text);
  bannerText.appendChild('Here is the warning.');
  banner.appendChild(bannerText);
  root.appendChild(banner);

  root.mount();
});
```

##### React

```jsx
import React from 'react';
import {extend, render, Banner} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <Banner
      action={{
        onAction: () => console.log('Pressed the action'),
        content: 'Press me',
      }}
      status="warning"
      title="This is a warning"
      onDismiss={() => console.log('Closed')}
    >
      Here is the warning.
    </Banner>
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| action? | `BannerAction` | Button to display at bottom of banner. |
| onDismiss? | `() => void` | Callback fired when banner is dismissed. |
| status? | `"success" \| "info" \| "attention" \| "warning" \| "new"` | Visual treatment of the banner based on message purpose. |
| title? | `string` | Title of the banner. |

### Banner​Action

| Name | Type | Description |
| - | - | - |
| onAction | `() => void` | Callback when the Banner action button is pressed. |
| content | `string` | Button label text. |

***

## Guidelines

* 📱 Do not nest other components other than Text. They will not be rendered. Use nested Text to render text content within the Banner.
* 📱 Do not nest banners inside horizontal Stacks, Pressables, ResourceItems, Cards, or CardSections. This will result in unintended behavior.

| ✅ Do | 🛑 Don't |
| - | - |
| Place Banners at the top of the page or section they apply to | Use too many Banners at one time |
| Use status to provide additional context to the merchant | |

For more guidelines, refer to Polaris' [Banner best practices](https://polaris.shopify.com/components/feedback-indicators/banner#best-practices).

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/banner.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/banner.md#guidelines)