View in Storybook
Anatomy
An alert banner displays messages coming from the product or user interaction. These should be prominent and always have a destination for a user to follow. We provide 2 different Alert banners that have certain usages:
Alert
The Alert component is used to show the user information about something that happened in the app, with optional actions to continue with.
- 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 Link to direct users into completing an action.
- Dismissable (optional): Alerts can be dismissed in certain instances.
AlertCompact
The AlertCompact component has its contents all on the same line (title, message, actions), and it offers only 1 action.
- Leading icon: To support the type of alert being displayed.
- Title: The description of a alert.
- Action (optional): Button or Link to direct users into completing an action. This is user-defined as to the importance of the associated call to 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 section 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. Action buttons are not usually required on these alerts.
Warning
A warning alert informs users of something they need to pay attention to or do. 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 when an issue needs to be resolved before proceeding. The alert should offer a solution to the problem and ideally not be dismissable.
Discover
These help customers identify new features and quick things they can do to improve their experience.
Usage
Full width
Banners can be used to signpost information at a full page level. They should only ever be placed at the top of the page, underneath the page header and only ever AlertCompact.
Nested
Banners related to a section of a page, like a card or modal, should be placed inside the container, below any section heading. These banners have less spacing and a pared-back design to fit within a content context.
As a rule, any Alert that is used must match the width of the content it is relating to.
Banners related to an element more specific than a section should be placed immediately below that element.
Best practice
- Not to be over used - only for the most important information.
- Titles should clearly describe the issue or reason for the alert.
- When including an action, make sure to use active verbs to guide the user on the action they will take when clicking it.
- Be dismissible unless they contain critical information a user needs to take action on
- Be placed correctly in the UI depending on its content and what it is referencing to.
- When used, an Alert must match the width of the content it is relating to.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Use an Alert when important information needs to be explained to a user. |
🚫 Display when highlighting new product annoucements. Instead use AlertDialog |
|
✅ Use a maximum of two actions in each Alert and one in AlertCompact. 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. |
|
✅ Put banners close in context to the problem they’re referring to. |
|
|
✅ Make sure the user knows directly from the title what is the message about. |
|
Also see