Alert

Best practices

• Use when you want to provide general information to a user’s journey.
• Use when you want to interrupt a user’s journey with important or critical information.
• Should be dismissible unless containing critical information or an important steps the user needs to take.

When not to use

• Not be used to call a user’s attention to explain an action instead of making the action itself clear.
• While alerts are an effective method of communicating with users, they can be disruptive and should be used sparingly.
• Not to be used in close proximity with other alerts.
• Not to be used when no results match a search query - use an empty state instead.
• Don't use an alert to communicate general promotional information.

Anatomy

1. Icon: Indicates the type/severity of information at a glance
2. Title (optional)
3. Message
4. Dismiss button (optional)
5. Links

Placement

Alerts should be placed in the appropriate context:

• Alerts relevant to an entire page should be placed at the top of that page, below the page header. They should occupy the full width of the content area.
• Alerts related to a section of a page (like a card, popover, or modal) should be placed inside that section, below any section heading.
• Alerts related to an element more specific than a section should be placed immediately above or below that element.

Responsive behaviour

All alerts have support for both desktop and mobile use:

Dismissible

When “Dismissible” is enabled for an alert component, a close/dismiss button is shown on the right side of the alert component.

Content guidelines

Alerts provide limited space for content, and therefore the content must be short and concise. A user should be able to quickly scan the notification, be apprised of the situation, and know what to do next.

Alerts should

• Focus on a single piece of information, or required action to avoid overwhelming users.
• Be precise so users don’t need to spend unnecessary time figuring out what they need to know and do.

Title

• Informative and descriptive
• Precise and scannable
• Use only single sentences

Body text

Body text should:

• Be concise - Ideally no more than 1 to 2 sentences
• Don’t repeat the title content in the body text - consider not using a title
• Explain how to resolve the issue, particularly for “attention” and “danger” alertsArticles

For errors

1. Explain what caused the error
2. Provide assurance to the user
3. Explain why the error occurred
4. Help them fix the problem
5. Give the user a way out