Messages and notifications

This is a success message on completion of an action.
This is an information-only message. No action required.

Standard inline messages

There are four categories of message: Error, Warning, Success and Information-only.

Usually they would appear at the top of the content, as they do here.

With JavaScript enabled, a close-button is added. When clicked, the message is set to display: none.

Messages with more content and links for testing purposes

Omnis sed unde vero et quia quisquam quisquam sit fuga numquam quia et rerum. quasi consectetur magnam in incidunt labore molestiae. ut est eos inventore tempore numquam iure et molestiae. deserunt saepe id et esse magnam et veritatis enim reprehenderit Est quaerat odit beatae natus et possimus corrupti. qui aliquid doloremque ea quia in nobis voluptas minima aliquam ipsum libero. sit ratione sunt illo rem ut sed odio iste consequuntur ab qui. vel velit voluptatem asperiores quam veritatis. nihil exercitationem veritatis sint laborum nemo nam dolor

This is a success message on completion of an action. Quas et distinctio iste facere aliquid reprehenderit nulla distinctio dolores temporibus atque deserunt Temporibus quidem animi et. animi aut quis sit voluptas a dolorem unde alias occaecati provident. tempore dolorum velit explicabo velit nesciunt id id voluptatem ut quo impedit voluptatum rem ipsam. esse laborum cumque laboriosam totam iste cupiditate earum aut porro dolor sit voluptates aut. error atque laborum consequatur
This is an information-only message. No action required. Fugit placeat libero aut aut in porro sed voluptas et minus laudantium velit animi eligendi quam deleniti fugiat Deserunt impedit odio sit ullam modi voluptatem sed et ea. voluptatum repellendus blanditiis voluptatem ut quidem ipsum temporibus eius recusandae neque. corrupti molestias non corrupti fugiat sed ipsum unde ut fugiat. blanditiis repellat fugit non eos quidem porro numquam consectetur dolorum porro est voluptas qui tenetur. distinctio quod quia quasi dolores aut aut mollitia. quis reprehenderit repellendus distinctio cupiditate quisquam quia optio aspernatur a aut. necessitatibus natus debitis vero enim

Message with long email address for testing purposes

Permissions for personwith.averylongemailaddress@mailinator.com have been updated.

Toast-style notifications

Non-modal notifications for administrative screens.

Ususally, messages would appear at the top of the page on a page refresh, or inline with the relevant content.
When the user is interacting with more complex pages which are being updated without a full page refresh, it might be more appropriate to display notifications in a popup at the top of the page. These are often referred to as toasts.

These are transitory messages, whcih disappear after a short period of time. They are JavaScript-only.

Examples

Usage

Trigger a toast notification using the following:

UCASDesignFramework.toast.information('Some sort of informational message.')

UCASDesignFramework.toast.success('Friendly success message.')

UCASDesignFramework.toast.warning('A supportive warning message.')

UCASDesignFramework.toast.error('If possible, we would avoid showing an error message.')

There are no other options, currently.

Clear all notifications using the following:

UCASDesignFramework.toast.clear()