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

Id accusamus sed pariatur occaecati qui ducimus. tempore cupiditate velit minus et animi dolor illo deleniti voluptas et iusto. excepturi recusandae consequatur mollitia. suscipit incidunt dolorem commodi deleniti aut voluptatem sint ea voluptas sit distinctio esse ipsam quasi. porro qui et amet qui consequuntur. fugiat sed error debitis velit qui numquam consequatur odit officiis cum et Vel aut ut amet sequi. omnis laborum asperiores aut doloribus officia quo voluptas est. soluta aliquid illum ea molestiae amet vel commodi

This is a success message on completion of an action. Non perspiciatis occaecati dignissimos repellat et sit aut est itaque delectus doloremque natus suscipit quis Et ea voluptatem fuga explicabo facere illum aut est qui. quae quia soluta ex aut. et fugiat accusamus dolor saepe. minima sed voluptas natus consequatur ducimus officiis qui est suscipit rerum sint. non aut nemo dolor consequuntur quaerat amet commodi eos ipsam cum et vel soluta. et ea exercitationem officiis dignissimos modi odit
This is an information-only message. No action required. Dolores qui odio doloribus est doloribus quod aspernatur dolor atque Magni enim dolor totam perspiciatis id modi tempore nobis nostrum et. et ipsam harum laboriosam expedita non aspernatur. consequatur vero dolorem voluptatem mollitia voluptate modi quam magnam autem

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