---
title: Banner
description: Highlights important information or required actions prominently within the interface. Use to communicate critical updates, warnings, information or success messages in a prominent way.
api_version: 2025-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsfeedback/banner
  md: https://shopify.dev/docs/api/pos-ui-extensions/latest/polaris-web-componentsfeedback/banner.md
---

# Banner

Highlights important information or required actions prominently within the interface. Use to communicate critical updates, warnings, information or success messages in a prominent way.

## Properties

* heading

  string

  Default: ''

  The title of the banner.

* hidden

  boolean

  Default: false

  Determines whether the banner is hidden.

* id

  string

  A unique identifier for the element.

* tone

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

  Default: 'auto'

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

## Slots

* primary-action

  HTMLElement

  The action taken when the Banner is pressed.

### Examples

* #### Code

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

## Preview

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

## Guidelines

* Use when needing to communicate to merchants in a way that is persistent but non-interruptive.
* Only one banner should be visible at a time.