Alerts

Notifying users of things that has happened

Related components

We have an alerts React component.
If you need a neutral info box or something that pulls attention away from the rest of the entire interface, use one of the notice component variants.
For help texts, use the help class message--info.
If you need a gray background to group some inputs, use the bg-gray2 class.

Recommendations

If you need help writing messages, consult our guidelines and examples.
Consider if the message requires an ARIA role.
Limit text and the box width using max-width utilities so they don’t become hard to read.
No title is better than one that has no function.

Usage

Classes	Usage
message--success	When the action was a success.
message--warn	Current, persisting and recently resolved deviations in systems or production. Something the user need to be aware of but they can proceed.
message--error	The user cannot proceed until they or we have fixed the issue.

Examples

Basic

This worked exactly as it should.

Confirmation emails can be delayed up to ten minutes.

The form contains errors that need to be fixed before you can proceed.

Address is required
Weight is required

<div class="message--success maxw48r pam">
  <div class="measure">
    This worked exactly as it should.
  </div>
</div>

<div class="message--warn maxw48r pam">
  <div class="measure">
    Confirmation emails can be delayed up to ten minutes.
  </div>
</div>

<div class="message--error maxw48r pam">
  <div class="measure">
    The form contains errors that need to be fixed before you can proceed.
    <ul>
      <li >Address is required</li>
      <li>Weight is required</li>
  </ul>
  </div>
</div>

Collapsible

Usedfor persisting warning messages in combination with the disclosure component. It can default to closed by removing the open attribute. State can be saved in local storage using JavaScript.

Collapsible alert open

This can be collapsed when the user has read the message, but the message can’t be removed completely because they might want to read it again. Useful for long messages or if they appear for long periods of time.

<details class="mb-disclosure message--warn maxw48r" open>
  <summary class="fwb">
    <span
      data-mybicon="mybicon-arrow-right"
      data-mybicon-width="16"
      data-mybicon-height="16"
    ></span
    >Collapsible alert open
  </summary>
  <div class="pam pts">
    <p>
      This can be collapsed when the user has read the message, but the message
      can’t be removed completely because they might want to read it again.
      Useful for long messages or if they appear for long periods of time.
    </p>
  </div>
</details>

Dismissible

This can be dismissed by listening for click events on the button.

<div class="message--success maxw48r pas flex justify-csb align-ifs">
  <div class="measure mas">
    This can be dismissed by listening for click events on the button.
  </div>
  <button type="button" title="Dismiss" class="btn-link">
    <span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui"></span>
  </button>
</div>