Switch to M&TNotifications
Notifications deliver page-level contextual help to guide the user through a task. Text appears within a color-coded container to give the message visual impact. Add an icon to draw additional focus to the notification. Use these classes only with `<div>` elements. Add a close icon to allow the user to dismiss a page-level notification, unless it's an error message.
Variants
Notifications appear either as soon as the page loads or as triggered by an input field blur state. Depending on use case, a notification will either appear fixed within the page content or be elevated above it.
Design Environment
Elevation
Inline notifications will push all content below them down rather than appearing elevated above it. Page-level notifications can appear either embedded at the top of the page, or elevated on the attention pane to allow page content to scroll behind. When elevated, the notification will use a medium shadow.
Generally, you should elevate a notification with information that the user will need to remain aware of as they navigate the page content, for example, a page-level error that can be resolved from two or more parts of the page. Notifications that contain information that is not pertinent to the user's task, for example a page-level information notification of an upcoming system outage, should be embedded within the layout so as not to distract the user from the page content they're interacting with.
Notification height should preserve a 16px padding around the text within the component.
Microcopy
Use full sentences but keep notifications as brief and to-the-point as possible. Make sure that the user understands what is required of them to continue.