FEEDBACK / COMPONENTS
Notification
Keep people informed without losing context.
About notification
Notifications are messages that convey information to users. They come in three variants: toast notifications, inline notifications, and actionable notifications.
Anatomy
Shared parts, named consistently.
A new theme is ready — unread
Your latest changes are ready for review.
- 1BarRequired
Ui element represent the purpose of the notification
- 2IconRequired
to represent the purpose of the notification
- 3TitleRequired
header overview of notification
- 4Arrow iconRequired
Navigations allow users to access additional details related to notification information.
- 5Back arrow iconRequired
navigation signals returning to the previous step, facilitating easy backward navigation
- 6Back LinkRequired
Links provide users with the ability to navigate to various locations, including returning to the previous notification state in this instance.
- 7Message bodyRequired
a brief description of the purpose of the notification
- 8Text LinkRequired
The Link’s label
- 9Date and time stamp
when the notification was generated
- 10DividerRequired
visual separator between notifications when stacked
Try the default
A working example with the shared V1 visual language.
A new theme is ready — unread
Your latest changes are ready for review.
When to use
Use for contextual updates. Keep critical information available until it is acknowledged or resolved.
Action and dismiss controls follow normal Tab order. New notifications should be announced by the host live region.