Toast
The Toast component is an easy-to-use, flexible solution for displaying unobtrusive notifications or simple messages in your application.
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.
Service
Placement
Dict<any>
Dict<any>
() => void
Function to instantly dismiss the toast.
boolean
Whether the toast is paused.
boolean
Whether the toast is in RTL mode.
boolean
Whether the toast is visible.
() => void
Function to pause the toast (keeping it visible).
Placement
The current placement of the toast.
() => any
Function render the toast in the DOM (based on the defined `render` property)
() => void
Function to resume the toast dismissing.
Dict<any>
Dict<any>
Type
The type of the toast.
string
The description of the toast.
string
The title of the toast.
Partial<Pick<ToastOptions, 'placement' | 'duration' | 'removeDelay'>>
The default options for the toast
'ltr' | 'rtl'
The document's text/writing direction.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The gutter or spacing between toasts
string
The unique identifier of the machine.
number
The maximum number of toasts that can be shown at once
string | Record<'top' | 'bottom' | 'left' | 'right', string>
The offset from the safe environment edge of the viewport
boolean
Whether to pause the toast when interacted with
boolean
Whether to pause toast when the user leaves the browser tab
number
The z-index applied to each toast group