Toast
We use toasts to temporarily display information to a user. For example, as a confirmation that an action was successfully or unsuccessfully completed.
Toasts do not present the user with an action. If an action needs to be performed because of the particular message, use a banner.
Toasts do not present the user with an action. If an action needs to be performed because of the particular message, use a banner.
Demo and Developer GuidelinesAnatomy
Toasts are concise and are written in sentence case with punctuation.
Types
Success
Success toasts confirm that an action has been completed successfully. In Procore, we always display a success toast following create and update actions (e.g. after an inspection is created or updated).
Error
Error toasts display general errors after the user attempts to complete an action (e.g. network connection or image processing failure).
We do not use error toasts for database errors or client-side errors. In those cases, use an error banner so that the message persists and the user can reference the error when taking actions to fix it.
We do not use error toasts for database errors or client-side errors. In those cases, use an error banner so that the message persists and the user can reference the error when taking actions to fix it.
Behavior
A toast eases in at .10 seconds and sits centered in the body 48px from the bottom of the viewport. It will remain visible for 4 seconds and then ease out at .15 seconds down to the bottom of the page and out of view.
Specifications
Padding
Styling
