Alert boxes are used to communicate information about a status, feature, or page content. The type of alert is determined by the content of the message: positive, caution, negative, or neutral.

‍

Types

1. Info

For informational, or neutral messages.

2. Success

For success alerts, or other positive messages.

3. Warning

For warnings, non-critical errors, or other messages where the user should proceed with caution.

4. Fail

For critical errors, or scenarios where something has gone wrong and a user can not proceed with the task at hand.

Placement

Alert Boxes should be placed immediately above the content they reference.

Content

When possible, alert boxes should be directly actionable. When not directly actionable, alert boxes should contain useful information and/or direction for the user on how to proceed.

‍

1. Icon

Icons should reflect the type and the message of the alert box.

2. Title

The title (header) should be a short, human-readable explanation of the alert box. Use as little technical jargon as possible, and keep the length to a minimum (see Alerts & Errors).

3. Body

The body is a more detailed explanation of why the alert box is present. It should be a concise and actionable explanation of the alert box (see Alerts & Errors). In cases where the body provides insufficient detail, always give a way for a user to get more detailed information.

4. Actions (optional)

Actions, in the form of UIButtons and/or UITextButtons should be embedded in alert boxes when the content of the alert box calls for action by the user. Actions are not always necessary, and commonly omitted in the info and success type alerts.

5. Close Action (optional)

The close icon action is fixed in the upper-right corner of the alert box.

6. Collapse Action (optional)

The collapse control is fixed in the upper-right corner of the alert box. The expansion icon points in the direction that the alert box will expand/collapse.

Alert boxes are not ephemeral notifications. By default, they stay visible on screen permanently, until a user action, or until some other status changes.

Aside from any embedded actions, alert boxes are not directly interactive components.

Collapsibility

By default, alert boxes are fully expanded with all content visible, but can be made collapsible by setting the canCollapse prop to true. This should be done in scenarios where alert content is very long and visually weighty, or when alert details are not necessary for the most common use cases of the feature.

When collapsed, only the title line of the alert box is visible, and the body content is hidden. This can be made the default appearance on page load, if desired.

Collapsed, but expandable alert boxes of type info can be used to add contextual descriptions of features and functionality when a UIProtip is insufficient.

Alerts should not be made both collapsible & closable.

Closing / Dismissal

Alert boxes can be made closable/dismissible by setting the canClose prop to true. This should be done in scenarios where alerts convey one-time information that would not need to be re-referenced by the user.

Alerts should not be made both closable & collapsible.