GitHub
Notifications
Notifications deliver information in different ways according to the level of importance. These range from micro interactions to system-wide messages.
Examples
Badge
A badge shows specific information about an item, action, or state. It appears as a small icon or a piece of text on top of another element, such as an icon, a button, or a thumbnail.
Best practice
Prioritise content
Only use badge notifications for important, relevant and actionable information
Maintain consistency
Ensure that the badge count accurately reflects the number of unread items or pending tasks
Give opt-out option
Provide an option to disable badge notifications so that users can control them.
Banner
Banner notifications appear at the top or bottom of the screen and can persist until the user dismisses them. They are commonly used for non-urgent messages or updates.
When to use
- To show non-critical information in messages, reminders, or announcements that users can review at their convenience.
- To inform users about the completion of background tasks, ongoing processes, or system status changes.
When not to use
Don’t interrupt users with irrelevant or non-essential information that may disrupt their focus.
Best practice
Content blocking
Banner notifications should not block important content or obstruct user interactions.
Intrusive timing
Avoid showing banner notifications at critical moments or during user interactions, as they can disrupt the user's workflow.
Excessive content
Avoid using banner notifications for complex or lengthy information that may not fit well within a limited space.
Dialogs
Dialog notifications provide important information to prompt users for a response or confirmation before they can be dismissed. Read more about Dialog patterns.
Types
Alert
An alert shows warnings, critical errors, success messages or other important information to users.
Modal
A modal overlays a page and focuses user attention on a task or information.
Popconfirm
A popconfirm prompts users to confirm or cancel an action.
Toast notification
Toast notifications are temporary notifications that appear on screens to show brief messages or provide non-critical feedback on user actions and system events.
When to use
- To show non-critical alerts that do not require immediate action but are relevant to users.
- To confirm an action has been successful, such as after a form submission or data update.
- To inform users about a task or process completion without disrupting their current workflow.
When not to use
- To display sensitive or private information which could compromise user privacy.
- When users need to make a critical decision or confirmation.
- To show long messages or complex information.
Best practice
Avoid overuse
Do not overuse toast notifications, as they can become annoying and interrupt the user experience if they appear too frequently.
Concise content
Write content that is brief and informative.
Prominent placement
Position the toast notification where it is visible but does not obstruct the user’s workflow.
Appropriate duration and dismissal
Ensure that toast notifications are visible long enough for users to have time to read. Provide an obvious dismiss button or close icon.
Avoid disruptions
Avoid showing toast notifications during critical moments that require users’ attention.
Accessibility
Shell DS components are programmatically determinable with appropriate semantic markup and are designed to meet colour contrast requirements. If you’re not using Shell DS code, you will need to cover the accessibility considerations for each component in this pattern.
Keyboard navigation
Ensure that all interactive elements within the notification are accessible through keyboard navigation.
Assistive technologies
- Ensure that notifications, whether toast, modal or banner are compatible with screen readers.
- Use appropriate ARIA (Accessible Rich Internet Applications) attributes to enhance the accessibility of the notification components.
Alternative text
Provide alternative text for non-text elements inside the notification, for example, icons and images for screen reader users.
Code consideration
Use semantic HTML elements and attributes to ensure that notifications are properly interpreted by assistive technologies.
Time consideration
- Avoid time-dependent interactions to accommodate users with cognitive or motor impairments.
- Avoid content that automatically refreshes within a set time period.
Colour contrast
Ensure the colour contrast is 4:5:1 between text and background within the notification, in accordance with WCAG guidelines.
Every effort has been made to ensure that the Shell Design System follows accessibility best practice.
The Shell DS React framework incorporates keyboard operation to support the widest variety of assistive technologies and devices. For any future frameworks other than React, accessibility will need to be reviewed.
Help us to help you by contacting the Accessibility team for support and information regarding any questions relating to accessibility.
Related
Is this page useful for you?
Your feedback helps to improve our documentation.