Banner

Use this component if you need to communicate to merchants in a prominent way.

Simple Banner example

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

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

function App() {
  return (
    <Banner title="Shipping rates changed" dismissible onDismiss={() => console.log('dismissed banner')}>
      <Text>Your store may be affected</Text>
    </Banner>
  );
}

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

extend('Playground', (root) => {
  const banner = root.createComponent(Banner, {
    title: 'Shipping rates changed',
    dismissible: true,
    onDismiss: () => console.log('dismissed banner')
  }, 'Your store may be affected');

  root.appendChild(banner);
});

BannerProps

title

Message to display inside the banner

tone

Adjusts the color and icon of the banner

dismissible

Whether or not the banner can be dismissed

onDismiss

Function invoked when the banner is dismissed

primaryAction

Sets the Primary action button of the container. This component must be a button component.

secondaryAction

Sets the Secondary action button of the container. This component must be a button component.

id

A unique identifier for the element.

Tone

'info' | 'success' | 'warning' | 'critical' | 'default'