Notification
Notifications are used to attract the user's attention. They offer four separate severity levels, and can also be modified for use in different contexts.
Severity levels
Information
Updated
The information severity should be used to convey an information message.
Caution
Updated
The caution severity should be used to convey information that is not critical but the user should be aware of.
Negative
Updated
The negative severity should be used to convey information that is critical and the user should take action.
Positive
Updated
The positive severity should be used to convey success or completion.
Appearance
Borderless
New
In cases where a notification sits inside another component, such as a table cell or a card, it may be useful to remove the outer border and highlight bar.
Inline
New
When vertical space is limited, you can use the inline variant.
Actions
Buttons
New
Notifications can have actions in either button or link form. These will appear below the notification message.
Dismissible
Updated
Notifications that can be dismissed can include a close button.
Timestamp
New
For notifications in which recency is important, you can include a section for time.
Accessibility
When adding notifications dynamically, it's important that the content of the notification is announced to users using assistive technology. If the notification is urgent, add aria-live="assertive" to the element, which will prompt assistive technology to announce it immediately, or use aria-live="polite", which will cause assistive technology to wait for a pause before announcing the information.
Deprecated
Deprecated
The notification child classes have been replaced to support new variants. The following class substitutions can be used to support existing functionality:
| Deprecated classes | Replaced by |
|---|---|
.p-notification__response |
.p-notification__content |
.p-notification__status |
.p-notification__title |
.p-icon--close |
.p-notification__close |
Import
To import just this component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework/scss/vanilla';
@include vf-base;
@include vf-p-notification;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.
React
You can use notifications in React by installing our react-component library and importing Notification component.