ToastApi

The toast component is a non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action.

import {extend, Button} from '@shopify/admin-ui-extensions';

extend('Admin::Product::SubscriptionPlan::Add', (root, api) => {
  const {toast} = api;

  const button = root.createComponent(Button, {
    title: 'Pop toast',
    primary: true,
    onPress: () => toast.show('Toast popped!'),
  });
  root.appendChild(button);

  const errorButton = root.createComponent(Button, {
    title: 'Do something',
    onPress: () => toast.show('That didn’t work.', {error: true}),
  });
  root.appendChild(errorButton);

  root.mount();
});

import {extend, render, useToast, Button} from '@shopify/admin-ui-extensions-react';

function App() {
  const {show: showToast} = useToast();

  return (
    <>
      <Button onPress={() => showToast('Toast popped!')} label="Pop toast" />
      <Button onPress={() => showToast('That didn’t work.', {error: true})} label="Do something" />
    
  );
}

extend(
  'Admin::Product::SubscriptionPlan::Add',
  render(() => <App />),
);

Anchor to PropsProps

optional = ?

Anchor to ShowToastOptionsShowToastOptions