Toast

Toast Container

The ToastContainer is a wrapper component that manages the display of toast notifications. It can be configured with various options such as stacking, sorting by importance, and limiting the number of toasts displayed at once.
Add the ToastContainer to your page/layout to enable toast notifications.

Preview

index.tsx

Types

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Preview

index.tsx

Duration

Preview

index.tsx

Position

Preview

index.tsx

Important

Preview

index.tsx

Pending

Preview

index.tsx

Design Tokens for Toast

Token	Color for	State/Meaning
--par-color-bg-toast-emphasis-high-generic	Toast background	Generic
--par-color-bg-toast-emphasis-high-information	Toast background	Information
--par-color-bg-toast-emphasis-high-affirmative	Toast background	Affirmative (success)
--par-color-bg-toast-emphasis-high-cautionary	Toast background	Cautionary (warning)
--par-color-bg-toast-emphasis-high-adverse	Toast background	Adverse (error)
--par-color-bg-emphasis-normal	Toast background	Normal emphasis
--par-color-border-toast-emphasis-high-generic	Toast border	Generic
--par-color-border-toast-emphasis-high-info	Toast border	Information
--par-color-border-toast-emphasis-high-affirmative	Toast border	Affirmative (success)
--par-color-border-toast-emphasis-high-cautionary	Toast border	Cautionary (warning)
--par-color-border-toast-emphasis-high-adverse	Toast border	Adverse (error)
--par-color-border-emphasis-normal	Toast border	Normal emphasis
--par-color-border-progress-bar-generic	Progress bar	Generic
--par-color-border-progress-bar-info	Progress bar	Information
--par-color-border-progress-bar-affirmative	Progress bar	Affirmative (success)
--par-color-border-progress-bar-cautionary	Progress bar	Cautionary (warning)
--par-color-border-progress-bar-adverse	Progress bar	Adverse (error)

Toast API Reference

`<Toast />`

Prop	Type	Default	Description
title	string \| ReactNode		Title text of the toast
message	string \| ReactNode		Main message content
action	ReactNode		Optional action element (e.g. button)
kind	'generic' \| 'information' \| 'affirmative' \| 'cautionary' \| 'adverse'	'generic'	Visual style and purpose of the toast
emphasis	'normal' \| 'high'	'high'	Emphasis level (visual prominence)
height	'flexible' \| 'compact'	'flexible'	Height variant (standard or compact)
position	'top-right' \| 'top-center' \| 'bottom-right' \| 'bottom-center'	'top-right'	Screen position for the toast
autoDismiss	boolean	false	Auto-dismiss after a set duration
duration	number	5000	Auto-dismiss duration in milliseconds
pauseOnHover	boolean	true	Pause auto-dismiss timer on hover
icon	ReactNode		Custom icon (overrides default)
progressBar	boolean	false	Show a progress bar for auto-dismiss
dismissButton	boolean	true	Show a close (dismiss) button
importance	number	0	Priority for stacking/sorting
pending	boolean	false	Show loading spinner (pending state)
onDismissed	function ()		Callback when toast is dismissed
...divProps	HTMLDivElement props		All native div props (className, style, ...)

Note: ToastOptions includes all the above props except id and removeToast (which are internal and managed by the system).

`toast()`

Creates and controls toast notifications programmatically.

Signature:

const myToast = toast(options: ToastOptions): ToastController;

Parameters:

Name	Type	Description
options	ToastOptions	Toast options (same as `<Toast />` props except `id` and `removeToast`).

Returns:

A ToastController object with the following methods:

Method	Signature	Description
`start()`	`() => void`	Show the toast
`stop()`	`() => void`	Remove the toast
`update()`	`(options: ToastOptions) => void`	Update the toast with new options
`getDetail()`	`() => ToastOptions & { id: string }`	Get the current toast detail (including `id`)

Example:

const myToast = toast({ kind: 'success', message: 'Task completed!' });
myToast.start(); // Show the toast
myToast.update({ message: 'Updated message' }); // Update toast content
myToast.stop(); // Remove the toast

Note: toast() dispatches custom events to control toasts. You must have a <ToastContainer /> mounted in your app for toasts to appear.