Toast

Toast

import { ToastRoot, createToast } from "@kiwicom/orbit-components/lib/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>
);
};
const notify = () =>
createPromiseToast(
promise,
{
loading: "...Loading",
success: "Got the data",
error: "Error when fetching",
},
{
success: {
icon: <Notification />,
},
},
);

Props

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”