Toast
The toast component renders short messages to confirm a user action has happened or is happening off-screen.
Toasts appear at the bottom of the screen.
Usage
Use toast messages to inform users that an event related to an action they took has happened off-screen (e.g., a change was saved, records were successfully uploaded, an import failed, etc).
Toasts should not be used in the following situations:
- In place of banners or alternate forms of notifications
- To display detailed error messages
- For attaching files to a widget that is updating live on-screen
Toasts disappear after a given number of milliseconds. They are also dismissible by clicking the close icon.
Content guidelines
Ensure language in toasts is concise and straightforward, because toasts appear for only a given number of milliseconds before they disappear.
- Example: Instead of saying “The changes were successfully saved.”, say “Changes saved.”
When appropriate, link toast message content to the page the message is referring to, so users can see the full context.
- Example: In the following toast message: “Records failed to upload. View error.”, the user can select “View error” to go to the page where the failure occurred and see the error details.
Punctuate toast messages with an exclamation mark only when confirming a positive action that makes progress for the user. In all other cases, use a period.
- Example: "Changes saved!"
- Example: “An error occurred.”
Configuration
No configuration is needed for this component in Constellation.
All information on this site pertains to the Constellation UX System (from 8.8 and onwards). Looking for something else? See resources specifically for Theme Cosmos. If you have questions, concerns, or any other feedback, please reach to us on Pega Support and include the capability 'User Experience' and 'Constellation' in your request.