Components
Toast

Toast

The Toast component is an easy-to-use, flexible solution for displaying unobtrusive notifications or simple messages in your application.

API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.

ToastProps

toast

Service

ToastGroupProps

placement

Placement

ToastItemContext

closeTriggerProps

Dict<any>

descriptionProps

Dict<any>

dismiss

() => void

Function to instantly dismiss the toast.

isPaused

boolean

Whether the toast is paused.

isRtl

boolean

Whether the toast is in RTL mode.

isVisible

boolean

Whether the toast is visible.

pause

() => void

Function to pause the toast (keeping it visible).

placement

Placement

The current placement of the toast.

render

() => any

Function render the toast in the DOM (based on the defined `render` property)

resume

() => void

Function to resume the toast dismissing.

rootProps

Dict<any>

titleProps

Dict<any>

type

Type

The type of the toast.

description

string

The description of the toast.

title

string

The title of the toast.

ToastProviderProps

defaultOptions

Partial<Pick<ToastOptions, 'placement' | 'duration' | 'removeDelay'>>

The default options for the toast

dir

'ltr' | 'rtl'

The document's text/writing direction.

getRootNode

() => ShadowRoot | Node | Document

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

gutter

string

The gutter or spacing between toasts

id

string

The unique identifier of the machine.

max

number

The maximum number of toasts that can be shown at once

offsets

string | Record<'top' | 'bottom' | 'left' | 'right', string>

The offset from the safe environment edge of the viewport

pauseOnInteraction

boolean

Whether to pause the toast when interacted with

pauseOnPageIdle

boolean

Whether to pause toast when the user leaves the browser tab

zIndex

number

The z-index applied to each toast group