Banner

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to purchase options extensions.

Banners inform merchants about important changes or persistent conditions. Use this component if you need to communicate to merchants in a prominent way.

Learn more about best practices and guidelines on using Banners.

import {extend, Text, Banner} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {

const banner = root.createComponent(Banner, {

action: {

onAction: () => console.log('Pressed the action'),

content: 'Press me',

status: 'warning',

title: 'This is a warning',

onDismiss: () => console.log('Closed'),

});

const bannerText = root.createComponent(Text);

bannerText.appendChild('Here is the warning.');

banner.appendChild(bannerText);

root.appendChild(banner);

root.mount();

});

import React from 'react';

import {extend, render, Banner} from '@shopify/admin-ui-extensions-react';

function App() {

return (

<Banner

action={{

onAction: () => console.log('Pressed the action'),

content: 'Press me',

}}

status="warning"

title="This is a warning"

onDismiss={() => console.log('Closed')}

Here is the warning.

</Banner>

);

}

extend(

'Playground',

render(() => <App />),

);

import {extend, Text, Banner} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const banner = root.createComponent(Banner, {
    action: {
      onAction: () => console.log('Pressed the action'),
      content: 'Press me',
    },
    status: 'warning',
    title: 'This is a warning',
    onDismiss: () => console.log('Closed'),
  });

  const bannerText = root.createComponent(Text);
  bannerText.appendChild('Here is the warning.');
  banner.appendChild(bannerText);
  root.appendChild(banner);

  root.mount();
});

import React from 'react';
import {extend, render, Banner} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <Banner
      action={{
        onAction: () => console.log('Pressed the action'),
        content: 'Press me',
      }}
      status="warning"
      title="This is a warning"
      onDismiss={() => console.log('Closed')}
    >
      Here is the warning.
    </Banner>
  );
}

extend(
  'Playground',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Name	Type	Description
action?	`BannerAction`	Button to display at bottom of banner.
onDismiss?	`() => void`	Callback fired when banner is dismissed.
status?	`"success" \| "info" \| "attention" \| "warning" \| "new"`	Visual treatment of the banner based on message purpose.
title?	`string`	Title of the banner.

Anchor to BannerActionBannerAction

Name	Type	Description
onAction	`() => void`	Callback when the Banner action button is pressed.
content	`string`	Button label text.

Anchor to GuidelinesGuidelines

📱 Do not nest other components other than Text. They will not be rendered. Use nested Text to render text content within the Banner.
📱 Do not nest banners inside horizontal Stacks, Pressables, ResourceItems, Cards, or CardSections. This will result in unintended behavior.

✅ Do	🛑 Don't
Place Banners at the top of the page or section they apply to	Use too many Banners at one time
Use status to provide additional context to the merchant

For more guidelines, refer to Polaris' Banner best practices.

Was this page helpful?