Also known as: banner or alert
The notification component creates a colorful banner that can be used to visually distinguish urgent content or highlight responses to user actions.
May I have your attention, please?
We've successfully received your response!
Notifications can also be displayed in compact mode, dismissed by the user and displayed in a stacked mode.
Use the notification component when you want to draw users attention to urgent or high-priority information as soon as they land on your website or specific webpage. It also can be used for confirmation of user actions, such as a successful form submission.
It is important to consider whether your content warrants the use of a notification banner, or if the callout component is sufficient for a specific use case. The callout component also draws user attention to specific content, though more subtly, and is ideal for calls-to-action or important content such as contact information.
The notification component must have a name, a theme and body content.
It’s important to keep web accessibility standards in mind while creating notification content. This includes creating accessible links with contextual titles and using appropriate heading structures to ensure maximum readability for screen readers.
Notifications can also be shown in the sidebar.