Alert messages

Notifying users

React component

We also have an alert message React component.

Alert messages are different from other content on coloured backgrounds in that they require some level of attention from the users.

Use

The different classes consist of a message-- prefix followed by the type. A warning message would then be message--warn. An alert message doesn’t require a strong or bold header, it can just be regular text.

Success This worked exactly as it should.
Example: An update or save was successful.

Warn Something is unusual. We need to warn the user. Usually not a user mistake, and they can proceed.
Example: Upcoming and existing issues, delays, deviation.

Error Something is wrong! We need to stop the user from proceeding.
Example: A service is unavailable, or the user must fix their mistake.

Info We have something to inform the users about. This is a neutral alert that has room for any type of content.
Example: Empty state in tables and search results.

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.
If you need an icon, pick one that fits the message, there is nothing wrong with using the info or exclamation icons.

Examples

Basic

There might be delays in certain areas. Proceed as usual.

<div class="message--warn maxw48r pam">
<div class="measure">
  There might be delays in certain areas. Proceed as usual.
</div>
</div>

With icon

The message classes include corresponding fill colours for the icons.

Form errors The form contains errors that need to be fixed before you can proceed. Details at the affected inputs.

<div class="message--error maxw48r pam flex">
<span
  data-mybicon="mybicon-pallet-alt"
  data-mybicon-class="message-icon mlxs mrm"
></span>
<div class="measure">
  <strong class="mrs">Form errors</strong> The form contains errors that need to be fixed before you can proceed.
  Details at the affected inputs.
</div>
</div>

Collapsible

These use the warn and error message classes in combination with the disclosure component. It doesn’t require any JavaScript unless you want to save the state.

Closed by default

Collapsible alert closed

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">
<summary class="fwb">
  <span
    data-mybicon="mybicon-arrow-right"
    data-mybicon-width="16"
    data-mybicon-height="16"
  ></span
  >Collapsible alert closed
</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>

Open by default

Collapsible alert open

<details class="mb-disclosure mb-disclosure--arrow message--error 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>