Components

Toast

A lightweight, non-intrusive notification component for displaying brief messages.

Examples

Toasts come in different variants such as success, error, warning, and info, allowing you to convey different types of messages to users.

You can customize where the toast appears on the screen, using the position prop

A loading toast can be used to indicate an ongoing process, such as data fetching or an action in progress.

Toasts support different transition effects.

options

Type:

ToastOptions

Additional configuration options for customizing the toast behavior and appearance.

Default:

Properties:

position

Type:

"top-right" | "top-left" | "bottom-right" | "bottom-left"

Determines where the toast will appear on the screen.

Default:

top-right

transition

Type:

"dropIn" | "slideIn" | "popIn" | "walkIn"

Defines the animation style used when the toast appears or disappears.

Default:

walkIn

className

Type:

string

Allows applying custom styles to the toast component using CSS class names.

Default:

key

Type:

string

A unique identifier, primarily used for loading toasts to update or replace them dynamically.

Default: