Button

Render a button that presents a toast

import React from 'react'
import { Button, Navigator, Screen, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale'

const ModalComponent = () => {
  const api = useApi()
  return (
    <Navigator>
      <Screen title="Home" name="Home">
        <Button title="Press me!" onPress={() => api.toast.show('Button tapped!')} />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => {
  return <ModalComponent />
})

import {
  Button,
  Navigator,
  Screen,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.home.modal.render',
  (root, api) => {
    const button = root.createComponent(Button, {
      title: 'Press me!',
      onPress: () => {
        api.toast.show('Button tapped!');
      },
    });

    const screen = root.createComponent(Screen, {
      name: 'Home',
      title: 'Home',
    });
    screen.append(button);

    const navigator =
      root.createComponent(Navigator);

    navigator.append(screen);

    root.append(navigator);
  },
);