---
title: Banner
description: Highlights important information or required actions prominently within the interface. Use to communicate statuses, provide feedback, or draw attention to critical updates.
api_version: 2025-10
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/feedback/banner
  md: https://shopify.dev/docs/api/checkout-ui-extensions/latest/components/feedback/banner.md
---

# Banner

Highlights important information or required actions prominently within the interface. Use to communicate statuses, provide feedback, or draw attention to critical updates.

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

* afterhide

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  Event handler when the banner has fully hidden.

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

* dismiss

  ((event: CallbackEventListener\<typeof tagName>) => void) | null

  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, TEvent>): void;
}) | null
```

### CallbackEvent

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

### Examples

* #### Code

  ##### Default

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

## Preview

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

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