Switch to WilmingtonNotifications
Notifications deliver feedback and error messages to guide the user through a task. They can appear at the page level or inline next to specific page content. Text appears within a color-coded container to communicate the type of feedback, and the icon adds visual impact. A notification may include a link to open a new page or a modal. Add a close icon to allow the user to dismiss a page-level notification, unless it's an error message.
Variants
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. To prevent excessive shifting of page content, try to keep inline notifications to two lines of text or less at your smallest breakpoint.