---
title: Banner
description: >-
The banner component highlights important information or required actions
prominently within the interface. Use banner to communicate statuses, provide
feedback, draw attention to critical updates, or guide users toward necessary
actions.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/banner
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/banner.md
---
Migrate to Polaris
Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.
# Banner
Use banners to communicate important messages to customers in a prominent way. Banners support multiple status tones to convey urgency, and can be made dismissible or collapsible depending on the context.
For inline status indicators on individual items, use [Badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/feedback-and-status-indicators/badge) instead.
### Support Targets (25)
### Supported targets
* CustomerAccount::KitchenSink
* [customer-account.footer.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.order-index.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.order-status.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.order-status.return-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.order-status.unfulfilled-items.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.profile.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.profile.company-location-addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.profile.company-location-payment.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.profile.company-location-staff.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.profile.payment.render-after
#### Use cases
* **Payment errors**: Alert customers to payment failures or verification issues that require immediate action.
* **Order updates**: Inform customers about changes to their orders, such as shipping delays or item substitutions.
* **Subscription reminders**: Warn customers about upcoming renewals, expiring payment methods, or plan changes.
* **Success confirmations**: Confirm that an action like updating an address or redeeming a reward completed successfully.
***
## Properties
Configure the following properties on the Banner component.
* **collapsible**
**boolean**
**Default: false**
Whether the banner content can be collapsed and expanded by the user. A collapsible banner conceals child elements initially, allowing the user to expand the banner to reveal them.
* **id**
**string**
A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.
* **onDismiss**
**() => void**
A callback that fires when the banner is dismissed by the user. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must manage the visibility of the banner in state by using the `onDismiss` callback.
* **status**
**Status**
**Default: 'info'**
The semantic meaning and color treatment of the banner.
* **title**
**string**
The title text displayed at the top of the banner to summarize the message or alert.
### Status
The status communicates the intent or urgency of a message to the user. - \`info\`: Neutral informational content with no implied urgency. - \`success\`: Indicates a successful action or positive state. - \`warning\`: Indicates something that requires attention but isn’t blocking. - \`critical\`: Indicates a serious problem or error that needs immediate action.
```ts
'info' | 'success' | 'warning' | 'critical'
```
***
## Examples
### Display a critical error
Use a `critical` banner to communicate problems that require immediate customer action. This example shows a payment verification error with a concise, actionable message.
## Display a critical error
## Display a critical error
##### React
```tsx
import {
reactExtension,
Banner,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
);
}
```
##### JS
```js
import {extension, Banner} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const banner = root.createComponent(Banner, {
status: 'critical',
title:
'Your payment details couldn’t be verified. Check your card details and try again.',
});
root.appendChild(banner);
});
```
### Show a dismissible info banner
Let customers dismiss informational banners after reading them. This example uses `onDismiss` to remove the banner when the close button is pressed. The Banner component is controlled, so you must manage visibility in state.
## Show a dismissible info banner
##### React
```tsx
import {useState} from 'react';
import {
reactExtension,
Banner,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
const [visible, setVisible] = useState(true);
if (!visible) {
return null;
}
return (
setVisible(false)}
/>
);
}
```
##### JS
```js
import {extension, Banner} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const banner = root.createComponent(Banner, {
status: 'info',
title: 'Your next subscription order ships on March 15.',
onDismiss: () => {
root.removeChild(banner);
},
});
root.appendChild(banner);
});
```
### Present a collapsible warning
Use a collapsible banner to show a warning title with additional details hidden by default. This example warns about an expiring payment method and reveals instructions when expanded.
## Present a collapsible warning
##### React
```tsx
import {
reactExtension,
Banner,
Text,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
Update your payment method before April 1 to
avoid interruption to your subscription.
);
}
```
##### JS
```js
import {
extension,
Banner,
Text,
} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const banner = root.createComponent(
Banner,
{
status: 'warning',
title: 'Your subscription payment method expires soon',
collapsible: true,
},
[
root.createComponent(
Text,
undefined,
'Update your payment method before April 1 to avoid interruption to your subscription.',
),
],
);
root.appendChild(banner);
});
```
***
## Best practices
* **Use banners sparingly**: Too many banners distract customers from the main content. Reserve them for the most important information.
* **Place banners contextually**: Display banners at the top of a page or section, below the relevant header. If a banner relates to specific content, place it near that content.
* **Include a next step when possible**: Add a Button component with a clear action so customers know what to do after reading the message.
* **Make banners dismissible unless critical**: Customers should be able to dismiss informational banners. Keep `critical` banners persistent until the issue is resolved.
* **Match status to urgency**: Use `info` for general updates, `warning` for issues needing attention, `success` for confirmations, and `critical` for problems that block progress.
***
## Limitations
* The Banner component is [controlled](https://reactjs.org/docs/forms.html#controlled-components). You must manage banner visibility in state using the `onDismiss` callback.
* Collapsible banners conceal child elements by default. The title is always visible.
* Banners don't have a built-in auto-dismiss timer. You must implement timed dismissal manually if needed.
***