Toast

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

Usage
Code
Interactions

Structure

Appearance


Alert

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

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

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

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.


Structure



Structure of toast
PropertyValue(s)
Width360 px
Corner radius4 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.


    Toast with actions

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

    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.