Usage

Example Code

1import { toast } from "inc-design-system/toast";

Example Code

1toast.info("Event has been added!", {
2    description: "You can view the event in the calendar.",
3});

Example Code

1import { Inter } from "next/font/google";
2import "./globals.css";
3
4import { Toaster } from "inc-design-system/toast";
5
6const inter = Inter({ subsets: ["latin"] });
7
8export default function RootLayout({
9  children,
10}: Readonly<{
11  children: React.ReactNode;
12}>) {
13  return (
14    <html lang="en">
15      <body className={inter.className}>{children}</body>
16      <Toaster />
17    </html>
18  );
19}
20

Props

Toaster

For more props:

Prop	Type	Description	Default
expand	boolean	Sets whether to expand the list of toasts or not. Default is false.	false
visibleToasts	number	Amount of visible toasts. Default is 3.	3
position	'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'bottom-center'	Place where the toasts will be rendered. Default is 'bottom-right'.	'bottom-right'
offset	string \| number	Offset from the edges of the screen. Default is '32px'.	'32px'
dir	'rtl' \| 'ltr' \| 'auto'	Directionality of toast's text. Default is 'ltr'.	'ltr'
gap	number	Gap between toasts when expanded. Default is 14.	14
pauseWhenPageIsHidden	boolean	Pauses toast timers when the page is hidden. Default is false.	false
toastOptions	ToastOptions	These will act as default options for all toasts. Default is 4000ms duration.	4000

ToastOptions

For more props:

API Reference

Prop	Type	Description	Default
className	string	Allows you to control the outer div of the toast.	-
id	string \| number	Custom ID for the toast.	-
closeButton	boolean	Adds a close button to the toast. Default is false.	false
dismissable	boolean	If false, prevents the user from dismissing the toast via swipe action. Default is true.	true
description	React.ReactNode	Toast's description, renders underneath the title. Default is '-'.	'-'
duration	number	Time in milliseconds before automatically closing the toast. Default is 4000ms.	4000
onDismiss	() => void	Function called when the close button is clicked or the toast is swiped. Default is '-'.	-
onAutoClose	() => void	Function called when the toast disappears automatically after its timeout. Default is '-'.	-
position	'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'bottom-center'	Position of the toast on the screen. Default is 'bottom-right'.	'bottom-right'