View in Storybook
Anatomy
This differs from our original in-page alert as these always appear over the interface to highlight notifications, what's new annoucements and features to consumers.
- iconLeft: To support the type of alert being displayed.
- Title: The description of a alert.
- Subtext: Accompanying copy to support the title of the alert.
- Actions (optional): Button and/or Link to direct users into completing an action.
- Dismissable (optional): Alerts can be dismissed in certain instances.
Variants
Default
A generic top-level alert that provides information to users that isn't specific.
Info
Our most common alert. These are used to communicate necessary or helpful messages to users about the product.
Success
Success alerts confirm a task that has been performed by a customer was completed successfully.
Warning
A warning alert tells users that an action can not be completed. An action can be provided here but is not essential. If the issue requires immediate attention, use a error alert.
Error
Error alerts tell customers that an action could not be completed. The alert should offer a solution to the problem.
Discover
These help customers identify new features and quick things they can do to improve their experience.
Placement
Bottom right corner
AlertOverlay appears on top of any content on a page to grab a user's attention. Their intention is never to distrupt, but to highlight information that might be relevant right now. Keep its content to the point and never more than 3 lines.
We also double the paddings from main page content to emphasis its separation so it does not feel connected to any content behind.
Transition
An eased-in smooth motion from the bottom right is obvious enough to grab attention but not overwheming to distract users.
Best practice
- Use them only when absolutely necessary, not for low-signal notifications or excessive confirmations.
- Clearly articulate the benefit of the feature and what it does
- These are to be targeted towards customer who would most benefit from this alert
- Be dismissable so users can get rid of alert dialogs about features they’re not interested in.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Use an AlertOverlay when important information needs to be explained to a user. |
🚫 Display inside the page or other component container. Instead use Alert |
|
✅ Use a maximum of two actions in each AlertOverlay. If only using one action button it should always be a primary button. |
🚫 Use warning or critical banners for messages consumers do not need to act upon immediately. |
|
✅ Keep the information on display relevant and as concise as possible. |
🚫 Display more than three AlertOverlay at any one time. |
|
✅ Make sure the user knows directly from the title what is the message about. |
|