Migrate to the Polaris banner component

The Polaris banner component highlights important status messages, warnings, or required actions so customers can resolve issues or stay informed. It replaces the previous Banner component and is available as <s-banner> in API versions 2025-10 and newer.

Anchor to Updated propertiesUpdated properties

The following properties are different in the Polaris banner component.

Anchor to titletitle

The previous Banner title prop is now called heading.

Anchor to statusstatus

The previous Banner status prop is now called tone. The default changed from 'info' to 'auto'.

Anchor to onDismissonDismiss

In the previous component, providing onDismiss automatically made the banner dismissible. Now you must also set dismissible to true.

import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useState} from 'preact/hooks';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <s-banner
      heading="Payment processed"
      tone="success"
      dismissible
      onDismiss={() => setVisible(false)}
    >
      Your order has been confirmed.
    </s-banner>
  );
}

import {useState} from 'react';
import {
  reactExtension,
  Banner,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <Banner
      title="Payment processed"
      status="success"
      onDismiss={() => setVisible(false)}
    >
      Your order has been confirmed.
    </Banner>
  );
}

Anchor to New propertiesNew properties

The Polaris banner component introduces the following new properties: