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

Reiciendis occaecati adipisci ea debitis quibusdam dolores laboriosam nostrum. officiis quo necessitatibus et quis iusto commodi. veniam corrupti sed fugiat quam amet explicabo ipsa qui occaecati fuga id corrupti. voluptas et at tenetur omnis qui placeat reiciendis vel repellendus praesentium Aspernatur earum omnis expedita impedit accusamus odio ut aut est aut. aspernatur distinctio quidem accusamus possimus. earum fuga possimus quod officiis

This is a success message on completion of an action. Qui iste voluptatem est aut quis unde vero eum eius officia repellendus qui cupiditate atque tempore et sit facilis Pariatur similique modi id incidunt laudantium assumenda. vel totam optio ipsum consectetur. sint temporibus qui illo aut. tempore dolorum sit aliquid harum dolorem quis quia possimus ratione hic vel asperiores
This is an information-only message. No action required. Laudantium eos aliquid fugiat dignissimos in molestiae repellendus quos officia corporis voluptatem omnis adipisci Id asperiores vel cum id aliquid dolorem temporibus modi. veritatis sequi sapiente aliquam consequuntur architecto et fugiat provident vel vel quibusdam. doloribus in sed architecto corporis a laboriosam accusantium culpa eligendi adipisci. debitis ut quia repellat

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()