System alerts are messages that inform users about system statuses, updates or settings.
Usage
When to use
These messages remain visible until they're dismissed by users, but they shouldn’t block users from continuing with their tasks.
System messages should be placed at the top of the page, pushing down existing page content instead of overlapping anything.
Component comparison table
Component | How it's triggered | Usage | Attention and interaction | Can it be used for error messaging? |
|---|---|---|---|---|
Dialog | User | Use sparingly as it's purposefully interruptive and launches a pop-up over the page. Requires user interaction to dismiss. | Immediate user attention and interaction. | Yes |
System alert | System | Provides a system-wide update and stays visible until it's dismissed. | No immediate attention or interaction required. | No, unless exceptions are given |
Page-level message | System or user | Presents important contextual information for users to take action. Commonly paired with form fields. Don't auto dismiss. | Medium to high level of user attention and interaction. | Yes |
Snackbar | User | Provides light feedback without requiring user interaction. | Low attention and no interaction required. | No |