Skip to main content

Alerts

Component status:Ready
Alerts are used to display brief important messages to users.

Alert Types#

Informational#

This is an info message.
This is additional text about this message.
<div class="bux-alert bux-alert--info" role="status">
<div class="bux-alert__icon" aria-hidden="true"></div>
<div class="bux-alert__message">
<div class="bux-alert__message-title">This is an info message.</div>
<div class="bux-alert__message-text">This is additional text about this message.</div>
</div>
</div>

Success#

This is a success message.
This is additional text about this message.
<div className="bux-alert bux-alert--success" role="status">
<div className="bux-alert__icon" aria-hidden="true"></div>
<div className="bux-alert__message">
<div className="bux-alert__message-title">This is a success message.</div>
<div className="bux-alert__message-text">This is additional text about this message.</div>
</div>
</div>

Warning#

This is a warning message.
This is additional text about this message.
<div className="bux-alert bux-alert--warning" role="status">
<div className="bux-alert__icon" aria-hidden="true"></div>
<div className="bux-alert__message">
<div className="bux-alert__message-title">This is a warning message.</div>
<div className="bux-alert__message-text">This is additional text about this message.</div>
</div>
</div>

Error#

<div class="bux-alert bux-alert--error" role="alert">
<div class="bux-alert__icon" aria-hidden="true"></div>
<div class="bux-alert__message">
<div class="bux-alert__message-title">This is an error message.</div>
<div class="bux-alert__message-text">This is additional text about this message.</div>
</div>
</div>

Alert with dismiss button
JSThis feature of the component requires JavaScript.
#

Page-level alerts can be used with an optional dismiss button, however it’s important to avoid allowing users to dismiss alerts that are used to display error messages.

This is a warning message.
This is additional text about this message.
<div class="bux-alert bux-alert--warning" role="status">
<div class="bux-alert__icon" aria-hidden="true"></div>
<div class="bux-alert__message">
<div class="bux-alert__message-title">This is a warning message.</div>
<div class="bux-alert__message-text">This is additional text about this message.</div>
<button class="bux-alert__dismiss">
<span class="visually-hidden">Dismiss this alert</span>
</button>
</div>
</div>

When to use an Alert#

  • To notify users about system status including error, warnings, and updates.
  • To notify users they’ve successfully completed a task
  • Use along with inline validation alerts to summarize multiple errors on longer forms

When to use something else#

  • If action taken by the user will result in losing/destroying their work, use a modal dialog that allows the user to confirm the destructive action.

Implementation notes#

  • Avoid using error messages that automatically disappear. If a user doesn’t have time to read the error message they may not know how to correct the problem once it has been automatically removed.
  • Write helpful alert messages. For errors, Include a brief description of the problem and how to fix it.
  • Alert title should be clear and concise. “Success!” rather than “Application was submitted successfully!”
  • Alert message should be descriptive and should clearly articulate the problem the user has encountered or the information you are trying to convey to the user.
    • “The user ID and password you entered do not match” is more clear than “Unauthorized”.
  • Where appropriate, alert title should be a link to the position on the page where the invalid element can be found.
  • Alert message should offer next steps where appropriate.

Good example:#

Scheduled System Maintenance
This system will be unavailable on August 1st due to scheduled system maintenance. Please check back on August 2.
  • Clear title; explains that maintenance was scheduled and expected
  • Informs the user of the length of the outage
  • Lets the user know when the system is expected to be available

Bad example:#

System is Down
The system is currently unavailable.
  • Doesn’t indicate that maintenance was scheduled and expected
  • Doesn’t inform the user how long the system will be unavailable
  • Doesn’t let the user know when the system is expected to be available again

Accessibility#

  • Ensure that a message given role="alert" is truly a message that requires immediate attention. role="alert" is usually interpreted as equivalent to aria-live="assertive" meaning that the message will interrupt any text currently being read aloud by a screen reader, mid word if necessary. This can be disruptive to users.
  • If the message is non-critical, use role="status" instead. This will still be read aloud, but the screen reader will finish reading the current element.
  • To maximize compatibility, add a redundant aria-live="polite" when using this role.

Resources#