Banner

Examples

• Show an information banner

  Description

  Show a persistent informational message using a banner. This example demonstrates rendering a banner with different status variants (info, success, warning, critical) to communicate important information to merchants without interrupting their workflow.

  React

  import React from 'react';
  import {
    Banner,
    ScrollView,
    Screen,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  const SmartGridModal = () => {
    return (
      <Screen title="Home" name="Home">
        <ScrollView>
          <Banner
            title="Information Banner"
            variant="information"
            action="Ok"
            visible
          />
          <Banner
            title="Confirmation Banner"
            variant="confirmation"
            visible
          />
          <Banner
            title="Alert Banner"
            variant="alert"
            visible
          />
          <Banner
            title="Error Banner"
            variant="error"
            visible
          />
        </ScrollView>
      </Screen>
    );
  };
  
  export default reactExtension(
    'pos.home.modal.render',
    () => <SmartGridModal />,
  );
  

  TS

  import {
    Banner,
    ScrollView,
    Screen,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension(
    'pos.home.modal.render',
    (root) => {
      const screen = root.createComponent(Screen, {
        title: 'Home',
        name: 'Home',
      });
      const scrollView =
        root.createComponent(ScrollView);
  
      scrollView.appendChild(
        root.createComponent(Banner, {
          title: 'Information Banner',
          variant: 'information',
          action: 'Ok',
          visible: true,
        }),
      );
  
      scrollView.appendChild(
        root.createComponent(Banner, {
          title: 'Confirmation Banner',
          variant: 'confirmation',
          visible: true,
        }),
      );
  
      scrollView.appendChild(
        root.createComponent(Banner, {
          title: 'Alert Banner',
          variant: 'alert',
          visible: true,
        }),
      );
  
      scrollView.appendChild(
        root.createComponent(Banner, {
          title: 'Error Banner',
          variant: 'error',
          visible: true,
        }),
      );
  
      screen.appendChild(scrollView);
      root.appendChild(screen);
    },
  );