The Toast component consists of ToastRoot and createToast/createToastPromise:

import { ToastRoot, createToast } from "@kiwicom/orbit-components/lib/Toast";

It’s better to use ToastRoot once at the root of your application with your other context providers and you can use createToast from anywhere after. The createToast function accepts two arguments. The first is required and is the message to be displayed on the toast. The second is an object with an icon key that receives the icon to be rendered on the toast.

import React from "react";
import { ToastRoot, createToast } from "@kiwicom/orbit-components/lib/Toast";
import Notification from "@kiwicom/orbit-components/lib/icons/Notification";
const notify = () => createToast("Here is your toast", { icon: <Notification /> });
const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <ToastRoot />
    </div>
  );
};

You can also use the createToastPromise function. The notification toast will be updated automatically, when the promise is resolved or rejected. The function receives two mandatory arguments and one optional. The first is the promise, the second is the message on the different statuses and the third one controls the icon displayed on each status (or all).

const notify = () =>
  createPromiseToast(
    promise,
    {
      loading: "...Loading",
      success: "Got the data",
      error: "Error when fetching",
    },
    {
      success: {
        icon: <Notification />,
      },
    },
  );

Table below contains all types of the props available for ToastRoot component