---
title: Banner
description: >-
  The `Banner` component highlights important information or required actions.
  Use banners to communicate critical updates, warnings, informational messages,
  or success notifications that require merchant attention.


  Banners provide persistent visibility with support for dismissible and
  non-dismissible states.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/banner
  md: >-
    https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-components/feedback-and-status-indicators/banner.md
---

# Banner

The `Banner` component highlights important information or required actions. Use banners to communicate critical updates, warnings, informational messages, or success notifications that require merchant attention.

Banners provide persistent visibility with support for dismissible and non-dismissible states.

Support

Targets (9)

### Supported targets

* [pos.​cart.​line-item-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/cart-details#cart-details-action-modal-)
* [pos.​customer-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/customer-details#customer-details-action-modal-)
* [pos.​draft-order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/draft-order-details#draft-order-details-action-modal-)
* [pos.​exchange.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-exchange#post-exchange-action-modal-)
* [pos.​home.​modal.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/home-screen#home-screen-action-modal-)
* [pos.​order-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/order-details#order-details-action-modal-)
* [pos.​product-details.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/product-details#product-details-action-modal-)
* [pos.​purchase.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-purchase#post-purchase-action-modal-)
* [pos.​return.​post.​action.​render](https://shopify.dev/docs/api/pos-ui-extensions/2025-10/targets/post-return#post-return-action-modal-)

#### Use cases

* **System alerts:** Display alerts about maintenance, outages, or important updates.
* **Error messages:** Show critical errors like payment failures or connectivity issues.
* **Success feedback:** Communicate successful completion of actions like order processing or sync.
* **Warnings:** Alert merchants to low inventory, expired payments, or business-critical conditions.

## Examples

### Display important messages with a banner

Display important messages using a `Banner` component with automatic color coding based on message severity. This example shows a basic banner with a heading and descriptive text.

## Display important messages with a banner

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

### Examples

* #### Display important messages with a banner

  ##### Description

  Display important messages using a \`Banner\` component with automatic color coding based on message severity. This example shows a basic banner with a heading and descriptive text.

  ##### Default

  ```html
  <s-banner heading="Marked as delivered" tone="success">
    <s-button slot="primary-action">Dismiss</s-button>
  </s-banner>

  <s-banner heading="Ready for shipping" tone="info">
    <s-button slot="primary-action">Dismiss</s-button>
  </s-banner>

  <s-banner heading="Couldn't restock items" tone="warning">
    <s-button slot="primary-action">Dismiss</s-button>
  </s-banner>

  <s-banner heading="Action failed. Contact developer" tone="critical">
    <s-button slot="primary-action">Dismiss</s-button>
  </s-banner>
  ```

## Properties

Configure the following properties on the `Banner` component.

* heading

  string

  Default: ''

  The title text displayed prominently at the top of the banner. This is the only property for text content—body text content isn't supported. You can't place `<s-text>` or other text elements as children.

* hidden

  boolean

  Default: false

  Whether the banner is visible or hidden. When set to `true`, the banner will be hidden from view. Use this to programmatically show or hide banners based on app state.

* id

  string

  A unique identifier for the element used for targeting with CSS, JavaScript, or accessibility features.

* tone

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

  Default: 'auto'

  Sets the visual appearance of the banner. The tone determines the color scheme. Available options:

  * `'auto'` - Lets the system automatically choose the appropriate tone based on context.
  * `'success'` - Green styling for positive outcomes and successful operations.
  * `'info'` - Blue styling for general information and neutral updates.
  * `'warning'` - Orange styling for important notices that require attention.
  * `'critical'` - Red styling for errors and urgent issues requiring immediate action.

## Slots

The `Banner` component supports slots for additional content placement within the banner. Learn more about [using slots](https://shopify.dev/docs/api/polaris/using-polaris-web-components#slots).

* primary-action

  HTMLElement

  The primary action element displayed within the banner, typically a button. Use this slot to provide interactive elements that allow users to respond to the banner's message, such as "Dismiss," "Learn More," or "Retry" buttons.

## Best practices

* **Apply appropriate tones:** Use `critical` for errors requiring immediate action, `warning` for important notices, `success` for confirmations, `info` for general information.
* **Keep headings concise:** Write brief headings that clearly communicate the message. Use the collapsible feature for additional detail.
* **Show one banner at a time:** Display only one banner to avoid overwhelming the interface. Prioritize by importance.
* **Make non-critical banners dismissible:** Allow dismissal for non-critical information. Keep critical alerts non-dismissible until resolved.
* **Include clear actions:** If action is needed, use the primaryAction slot to provide clear next steps.
* **Use for persistent messages:** Use banners for messages that need to persist. For temporary notifications, consider toast notifications.