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.

Demo and Developer GuidelinesFigma Component

Anatomy

Toasts are concise and are written in sentence case with punctuation.

Toasts have a character count limit of 65.

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.

Specifications

Padding

Styling