Toast

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

Usage
Code
Interactions

Appearances

The appearances of our toast are goal oriented.


Alert

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

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

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

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



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

Configurations

PropertyValue(s)Default value
Appearance
  • Info
  • Success
  • Warning
  • Alert
  • Info
    Title<title>-
    Description
    (optional)
    <description>-
    Actions
    (optional)
  • Action 1
  • Action 2
  • -

    Usage


    Positioning of toast

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

    Positioning of toast Positioning of toast

    Timeout

    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?