Notifications
Keep users informed and help bring attention to important status updates through notifications. As users make progress toward achieving their goal, they should receive appropriate and timely information.
Types
Makes users aware of relevant issues involving their present activity and/or system.
- Informational — Provides context-specific information to users.
- Successful — Confirms a user’s task was successfully completed, displayed through a static message.
- Warning — Alerts users if their activities may lead to unexpected consequences.
- Error/Danger — Notifies users of an error or critical failure that blocks them from proceeding until the issue has been resolved
Alerts
An alert notifies the user when their status changes or relays additional information.
Toasts
Toast serves as a feedback & confirmation mechanism after the user takes an action.
Standard
Guidelines
Notifications allow users to stay informed and be notified of any important change in status or essential update. All designs should be AA compliant.
Sizes
Notifications have three default heights but can be altered according to content length.
- Small: 32px
- Medium: 40px
- Large: 48px
Specifications
Notification specifications are available for designers and developers to help them build pixel-perfect products.
- Allow users to dismiss a notification.
- Do use clear and concise language.
- Do ensure users know how to take action if it is necessary.
- Have too many notifications. They will either overwhelm or distract the user and are likely to be ignored.
- Use technical jargon or language unfamiliar to the user.
- Leave users without next steps.