Alerts
Purpose
Alert messages are used to bring information to the user’s attention in different ways.
The importance of information and the way it is presented can vary quite a lot. The main differences between the components are highlighted in the table below. Even though some components might look very similar, their semantics and accessibility handling will be very different.
If you have additional requirements and can’t find what you need, pop us a message in #sky-ui-design-system Slack channel and we’ll be happy to help.
Alert component characteristics
| Toast | Notification | Modal (as prompt) | Modal (for content) | Banner | |
|---|---|---|---|---|---|
| Purpose | Non-critial feedback on user action | System or account information & errors | Information for immediate attention | Offering more detailed information | Offers and promotional information |
| Trigger | User action | User action, or System event | User action | User action | Page load |
| User interaction | No action required | Action required (optional) | Action required | Action required (only to dismiss) | No action required |
| Release trigger | Time-out | Action | Action | Dismissal | None |
| Dismissable | No | Yes (optional) | Yes | Yes | Yes |
| Type of information | Non-essential, Contextual | Essential, Contextual, or global | Essential, Contextual, or global | Informational, Contextual | Non-essential, Promotional |
| Impact on user | Low | High | Immediate | Immediate | Low |
| Handling on Screen-readers | Content only read out only if user is idle | Content read out at the next opportunity | Content read out within document flow | Content read out within document flow | Content read out within document flow |
| Placement | Bottom of screen, covering other conent | Top of screen, below the masthead | Middle of screen, covering other content | Middle of screen, covering other content | Top of screen, pushing content down |
Choosing the right component
