Toasts are used to show alerts and give feedback to the users on the outcome of their action without disrupting the user workflow.



The appearances of our toast are goal oriented.


Alert variant is used to convey an error state or failure which blocks a process. It should be used when the goal of the user hasn’t been met.

The error may be generic like - ‘User not found’, 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. This information is neutral in tone and is not associated with a connotation.

This info may be generic like - ‘In progress’, or ‘new updates available’, and more.


Success variant is used to convey the success state of a task/process. It should be used when the goal of the user has been met.

Successful completion may be in the form of - ‘Mail sent successfuly’, ‘User deleted successfully’, ‘Mobile number verified successfully’, ‘Meeting scheduled successfully’, and more.


Warning variant is used to convey an interrupted state which delays or partially prevents a process from completion.

The warning may be generic like - ‘1 file could not be downloaded out of 50’, or ‘80 assignments uploaded out of 100’, and more.


Structure of toast
Width360 px
Corner radius4 px
(top, right, bottom, left)
12 px, 8 px, 16 px, 16 px
Spacing between actions8 px
(bottom, left)
32 px, 32 px


PropertyValue(s)Default value
  • Info
  • Success
  • Warning
  • Alert
  • Info
  • Action 1
  • Action 2
  • -


    Positioning of toast

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

    Positioning of toast Positioning of toast


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

    Toasts with actions

    Use toast with actions when you want the users to take an action after reading the message. Also, make sure the same actions are also available elsewhere on the page.

    Toast with actions Here the action in the toast is also available in the table row so that users can take the action comfortably even if they clone the toast.

    Toast without description

    Multiple Toasts

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

    Overuse of toasts

    It is recommended to not use toasts when the user interface is enough to provide feedback.

    Overuse of toasts Toast is not needed here because users can already see the updated note in the right section.

    Was this page helpful?