Badge

Badge

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 />,
);

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);
  },
);