Toast Component

Toasts are brief messages that communicate information to the users. They are easily noticeable but require minimal user interaction.

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)

Code