Toast

Toasts are used to show alerts and give feedback to the users about an action they took.

Alert variant is used to convey an error state or failure which blocks a process. The error may be generic like - ‘User not found’, ‘Mobile number already registered’, or failure of a process like - ‘Could not create users’, ‘File items could not be uploaded’, and more.

Info variant is used to convey information to the users. Information may be generic like - ‘New updates available’, ‘Your consent was recorded’ or convey an in-between state of a process like - ‘Export is in process’, ‘Uploading file items’, and more.

Success variant is used to convey success state of a task/process. Successful completion may be in the form of - ‘Mail sent’, ‘User deleted’, ‘Mobile number verified’, ‘Meeting scheduled’, and more.

Warning variant is used to convey an interrupted state which delays or prevents a process from completion. Interruption may be in the form - ‘2 permissions denied to Joy Lawson’, ‘1 file could not be downloaded’, and more.

They appear at the bottom left of the screen and overlay any content.

Toasts will close when the close button is clicked, or after a timeout – the default is 5 seconds.

Use toast with actions when you want the users to take an action after reading the message.

Only one toast is displayed at a time. Subsequent toasts get stacked with a margin of 16px with the latest one on top.