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
The information severity should be used to convey an information message.
Caution
The caution severity should be used to convey information that is not critical but the user should be aware of.
Negative
The negative severity should be used to convey information that is critical and the user should take action.
Positive
The positive severity should be used to convey success or completion.
Appearance
Borderless
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
When vertical space is limited, you can use the inline variant.
Actions
Buttons
Notifications can have actions in either button or link form. These will appear below the notification message.
Dismissible
Notifications that can be dismissed can include a close button.
Timestamp
For notifications in which recency is important, you can include a section for time.
Class reference
Root element
.p-notification
Notification in default variant. Same as .p-notification--information.
.p-notification--information
Information notification. Same as default .p-notification.
.p-notification--positive
Positive notification.
.p-notification--caution
Caution notification.
.p-notification--negative
Negative notification.
&.is-borderless
Borderless variant of notification. Used when notification is embeded into another container element.
&.is-inline
Inline version of notification with title and message rendered side by side.
Content container
.p-notification__content
Container element for notification content (title and message).
Title
.p-notification__title
The notification title.
Message
.p-notification__message
Text of the notification message.
Close button
.p-notification__close
The button to close the notification.
Meta-data container
.p-notification__meta
The container element for notification meta-data (timestamp and action buttons).
Timestamp
.p-notification__timestamp
Notification timestamp or date.
Actions container
.p-notification__actions
Container element for notification action buttons.
Action button
.p-notification__action
Single action button.
JavaScript functionality
Some features of the notification component may require JavaScript implementation.
If the notification contains a dismiss button, clicking on it should remove the notification from the view.
Notifications can also have optional action buttons, clicking on those should trigger the relevant action and close the notification.
You can use our Notification React component for a full-featured implementation that includes any JavaScript functionality.
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';
@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.
See the documentation for our React Notification component
Related components
The modal component can be used to overlay an area of the screen which can contain a prompt, dialog or interaction.