Using this Component
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.
For informational, or neutral messages.
For success alerts, or other positive messages.
For warnings, non-critical errors, or other messages where the user should proceed with caution.
For critical errors, or scenarios where something has gone wrong and a user can not proceed with the task at hand.
Alert Boxes should be placed immediately above the content they reference.
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.
Icons should reflect the type and the message of the alert box.
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).
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.
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.
Component code details are not currently available on this site, but we're working on it!
Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.