An alert is a notification which gives the user additional information about an action they need to take or be aware of. Alerts might include links and icons to reinforce specific messaging, or color to convey a level of urgency.
Example
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| alignment | oneOf 'left' | 'center' | - | 'left' | How the text is aligned |
| type | oneOf 'bad-news' | 'brand' | 'good-news' | 'warning' | - | 'brand' | Various color schemes |
| children | string | node | yes | - | Text that appears within the component |
| isDismissible | bool | - | - | Button allowing users to dismiss the component |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
Alerts help users understand the implications of an action and make the right choice in the moment. Severity levels help them make that choice.
Levels of severity
It's important to choose the correct severity level, in order to convey the correct level of urgency and concer, but also avoid scaring users. The levels of alerts are shown below in order of severity.
Good News
Use this to indicate success of a user action.
Brand
This is the default. Use this to display information about tasks that aren't destructive and require no further action.
Warning
Use this to warn the user about possible unanticipated impact or if a follow-up action is required.
Bad News
Use this when the action is potentially destructive and something may be removed, or as confirmation of a destructive action. May require a follow-up action.
Configurations
Static
Static alerts are presented, and cannot be dismissed. They are purely informative.
Dismissable
Dismissible alerts have a close button that the user can click to dismiss the alert. When closed, the alert disappears entirely.
Best Practices
Do
Place the alert at the top of the page or in context where needed
Include links as needed and ensure the alert is dismissible through user action
Limit links within an alert to a single primary action
Keep alert text clear and concise, ideally a single line of text, and two lines max
Never use alerts to directly inject marketing, sales, or educational content. Consider a butter bar instead.
Use a "Learn more" link in an alert to allow the user to find additional information on a topic.
Don't
Don't be vague. Use specific language in an alert to clearly explain potential implications and any actions the user needs to take
Don't be to wordy. Be concise.
Don't use multiple or stacked alerts. Consider combining the content into one alert block with multiple lines.
Don't use more than one link in an alert.