A toast is a self-dismissing bar used to give users non-critical info about action status within an app or another app: record created, file deleted, instance updated, data imported…

Structure

Toasts should have an app icon, a short message, action links if needed and a close icon.

App icon

The app icon, where the action occurred, should be displayed on the left-hand side.

Message

The message should be short and updates users on an action that have been performed. It should have the following format: {Record type icon} {Action type icon} {Type and action}: {Name of the content where action occurred}.

Good example

Bad example

Action link

If needed, action links can be added. A maximum of 2 words should be used to label action links.

Good example

Bad example

If there is not enough space to add all action links, they should be placed under a “More” dropdown.

The “Add note” action link should extend the toast on click and display an active text field. 

Location & size

Toasts appear at the bottom right of the screen and shall take less than 50% of the screen for desktop.

Behavior

Toasts slide from the left when non-critical information needs to be shown to users. 

The information displayed in toasts should be relevant in the short term only and non-critical.

Good example

Illustration with non- critical info

Bad example

Illustration with critical info

If users do not click on the “X” icon to dismiss toasts, they should slide down automatically after a period of time: 6 seconds if there are no action links, 10 seconds for toasts with links. Timing stop if users hover toasts.  

If several toasts are needed, they should appear on top of each other. 

Be aware: no more than 5 toasts should be visible.

Style

Toasts are rectangles with 6px corner raduis, a black background with 85% opacity and a 2px white outline. 

Related pages

A message banner is triggered when: There is an important update related to a pane. For instance: “John Doe has an overdue loan”. An er...
A modal is a container triggered by a user’s action to give critical information about the action, to ask the user to take a decision ...