Banner

Simple Banner example

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

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

function App() {
  return (
    <Banner title="Shipping rates changed" dismissible onDismiss={() => console.log('dismissed banner')}>
      <Paragraph>Your store may be affected</Paragraph>
    </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);
});