Badge

component

Examples

• Badge

  React

  import React from 'react';
  import {
    Badge,
    Screen,
    reactExtension,
  } from '@shopify/ui-extensions-react/point-of-sale';
  
  const SmartGridModal = () => {
    return (
      <Screen title="Home" name="Home">
        <Badge
          text="Badge"
          variant="success"
          status="complete"
        />
      </Screen>
    );
  };
  
  export default reactExtension(
    'pos.home.modal.render',
    () => <SmartGridModal />,
  );
  

  TS

  import {
    Badge,
    Screen,
    extension,
  } from '@shopify/ui-extensions/point-of-sale';
  
  export default extension(
    'pos.home.modal.render',
    (root) => {
      const mainScreen = root.createComponent(
        Screen,
        {
          name: 'Home',
          title: 'Home',
        },
      );
  
      const badge = root.createComponent(Badge, {
        text: 'Badge',
        variant: 'success',
        status: 'complete',
      });
  
      mainScreen.append(badge);
      root.append(mainScreen);
    },
  );