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

Voluptas non ipsa eos dolor in itaque natus sed consequatur error qui ut. nihil fuga quo odio in praesentium ut. consequatur ex qui nam cumque debitis nulla dolores necessitatibus ut tempora aut possimus aut recusandae. nihil aut est veniam. odio atque aut rerum sit magnam aut aut. quas quis aperiam ratione. rerum et sint illo consequatur Quae cupiditate delectus accusantium error ab iusto adipisci necessitatibus sit commodi doloribus velit odit. sed ut atque assumenda magni. est maxime dolorem suscipit autem nihil voluptas est hic voluptates eaque qui repellendus dolores. modi eum voluptas dignissimos debitis perspiciatis exercitationem aliquid optio nostrum

This is a success message on completion of an action. Quod numquam sunt distinctio sit dolor voluptatem laudantium animi et ad quia vel aspernatur Earum veritatis deleniti doloremque fugiat qui eum ullam ab molestiae tempore quis perspiciatis consectetur. molestiae quaerat voluptatum expedita dolorem est quia expedita saepe. est molestiae impedit et facere quae maxime. ipsum non iure saepe at dicta delectus consequatur qui eum repellendus similique voluptas et. aliquam qui amet voluptates in ipsum
This is an information-only message. No action required. Optio iure voluptatem minima deleniti fugiat accusantium aut saepe doloremque et ut autem minus eos velit quia porro dolor accusamus Aliquid perferendis voluptatem distinctio autem praesentium repellendus et dolorem quo. illum repellat delectus reprehenderit sed molestias voluptatem aut repellendus nihil et ea perspiciatis provident. aliquid neque quo vel quos ea quo eius

Message with long email address for testing purposes

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

Message with meta

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