Inline Alerts

Rules

• The nature of the message should align with the visual treatment, e.g. a success alert would use the alert-success style and include the success icon

Constraints

• Text should always be left justified
• Including an icon is not necessary, but could help clarify the type of alert

Principle

• An alert provides a user with a contextual message

Accessibility

• An alert should use role="alert"
• Do not rely on color alone to indicate the nature of the status message, especially when the message could be interpreted in different ways

Examples

• A form is submitted and not all inputs are completed, the alert may let the user know that all inputs are required and direct a user to offending inputs.
• A user may be creating a new password within a form and see an alert next to the field the form that indicates the password satisfies the criteria.

alert Required	The base class for alerts and notifications
alert-icon Modifier	Adds a corresponding icon based on the style of the alert
alert-dismissible Modifier	Adds the ability to close the alert (also removes from the DOM)
alert-success Modifier	Styles the alert with the green success style and includes the green checkmark icon if alert-icon is used
alert-info Modifier	Styles the alert with the blue info style and includes the blue notice icon if alert-icon is used
alert-warning Modifier	Styles the alert with the yellow warning style and includes the yellow notice icon if alert-icon is used
alert-danger Modifier	Styles the alert with the danger style and includes the red notice icon if alert-icon is used
fade in Modifier	Fade out the alert when it‘s dismissible (note there are two separate classes used together)

---

• Last updated March 16, 2018
• Authorable - Yes
• Core - Inline Alerts