Toast Variations
Dismissible
Success Alert - Here you can see success alert.
Dismissible alerts overlay any content and the users needs to manually close the alert to make it disappear.
Dismissible
Success Alert - Here you can see success alert.
Dismissible alerts overlay any content and the users needs to manually close the alert to make it disappear.
Dismissible
Success Alert - Here you can see success alert.
Dismissible alerts overlay any content and the users needs to manually close the alert to make it disappear.
Toast States
Success
Success Alert - Here you can see success alert.
Informing success / valid / complete messages
Error
Error Alert - Here's you can see an error alert
Informing error / invalid messages
Warning
Warning Alert - Here's you can see an warning alert
Informing warning / alerting messages
Neutral
Question Alert - Here's you can see an warning alert
Informing neutral messages. Insignificant
Guideline
• Use concise and clear messages. Try to have only one sentence &
one line of text.
• Flag and dismissable alerts are placed on the top right corner of
the page for desktop and top center full width for mobile.
• When there are multiple alerts, they will stack up vertically on
one another with the most recent alert on the top.
• Keep the message simple and concise, try to write no more than 3
words.
When to Use
• To immediately inform the user about certain events that are
happening on the system.
• Informing certain event on the system without disrupting the
user’s main action.
When not to Use
• Display messages with lots of words (more than one sentence). Use
information modal instead.
• When a major user action is needed from the message. Use modal
dialogue instead. You can place a link text button inside the alert
box for redirecting into different page (but not major action which
related to the main user flow)