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


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 (
<button onClick={notify}>Make me a toast</button>
<ToastRoot />

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",


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

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