Toast

Toast shows a brief message that’s clear & understandable.

Toast

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

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 createToastPromise function, notification will be updated automatically, when promise will be resolved or rejected

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

Props

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

NameTypeDefaultDescription
dataTeststringoptional prop for testing purposes.
idstringSet id for Toast wrapper
topOffsetnumber8top offset for toast container
leftOffsetnumber8left offset for toast container
rightOffsetnumber8right offset for toast container
bottomOffsetnumber8bottom offset for toast container
gutternumber8distance between toast notifications
dismissTimeoutnumber5000timeout until toast will be dismissed
placementPlacementposition for toast container

Placement

Placement
“top-left”
“top-center”
“top-right”
“bottom-left”
“bottom-center”
“bottom-right”