---
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/checkout-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/badge).
api_version: 2026-01
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/banner
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-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/checkout-ui-extensions/2026-01/polaris-web-components/feedback-and-status-indicators/badge).

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

  **'success' | 'info' | 'auto' | '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/2026-01/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/production/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 thoughtfully and sparingly, and only for the most important information. Too many banners distract customers from completing checkout.

* Banners are typically displayed at the top of a page or a section, if they relate to specific content. Place banners below the relevant page or section header.

* Include a Button component with next steps when possible.

* Make banners dismissible, unless they contain critical information or an important step that customers need to take.

* Use the `info` banner to update customers about a change or to give them advice.

* Use the `warning` banner to display information that needs attention or that customers need to take action on. Warning banners can be stressful for customers, so be cautious about using them.

* Use the `critical` banner to communicate problems that customers need to resolve immediately to complete checkout.