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


  Banners support multiple tones to convey urgency levels, optional actions for
  next steps, and can be positioned contextually within sections or page-wide at
  the top. For inline status indicators on individual items, use
  [badge](/docs/api/customer-account-ui-extensions/2026-01/web-components/feedback-and-status-indicators/badge).
api_version: 2026-01
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/feedback-and-status-indicators/banner
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/feedback-and-status-indicators/banner.md
---

# Banner

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.

Banners support multiple tones to convey urgency levels, optional actions for next steps, and can be positioned contextually within sections or page-wide at the top. For inline status indicators on individual items, use [badge](https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/feedback-and-status-indicators/badge).

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## Properties

* **collapsible**

  **boolean**

  **Default: false**

  Makes the content collapsible. A collapsible banner will conceal child elements initially, but allow the user to expand the banner to see them.

* **dismissible**

  **boolean**

  **Default: false**

  Determines whether the close button of the banner is present.

  When the close button is pressed, the `dismiss` event will fire, then `hidden` will be true, any animation will complete, and the `afterhide` event will fire.

* **heading**

  **string**

  **Default: ''**

  The title of the banner.

* **hidden**

  **boolean**

  **Default: false**

  Determines whether the banner is hidden.

  If this property is being set on each framework render (as in 'controlled' usage), and the banner is `dismissible`, ensure you update app state for this property when the `dismiss` event fires.

  If the banner is not `dismissible`, it can still be hidden by setting this property.

* **id**

  **string**

  A unique identifier for the element.

* **tone**

  **'info' | 'auto' | 'success' | 'warning' | 'critical'**

  **Default: 'auto'**

  Sets the tone of the Banner, based on the intention of the information being conveyed.

  The banner is a live region and the type of status will be dictated by the Tone selected.

  * `critical` creates an [assertive live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) that is announced by screen readers immediately.
  * `neutral`, `info`, `success`, `warning` and `caution` creates an [informative live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) that is announced by screen readers after the current message.

## Events

Learn more about [registering events](https://shopify.dev/docs/api/checkout-ui-extensions/latest/using-polaris-components#event-handling).

* **afterhide**

  **CallbackEventListener\<typeof tagName>**

  Event handler when the banner has fully hidden.

  The `hidden` property will be `true` when this event fires.

* **dismiss**

  **CallbackEventListener\<typeof tagName>**

  Event handler when the banner is dismissed by the user.

  This does not fire when setting `hidden` manually.

  The `hidden` property will be `false` when this event fires.

### CallbackEventListener

```ts
(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null
```

### CallbackEvent

```ts
TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}
```

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/banner-default-DUI7koDV.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-banner heading="Free shipping on all orders." tone="info"></s-banner>
  ```

## Best Practices

* Use banners sparingly and only for important information. Too many banners can distract from the main content.
* Place banners at the top of a page or section, below the relevant header.
* Include a Button with a next step whenever possible.
* Make banners dismissible unless they are critical or require action.
* Use `info` for general updates or advice.
* Use `warning` to highlight things that need attention. Use sparingly as it can add stress.
* Use `critical` for problems that must be resolved.