Skip to main content

Alerts

2 min read

Canvas includes several legacy alert classes such as alert-info, alert-success, and alert-error. These still work but rely on older Canvas styling. Below are examples using those classes, followed by modern inline-style alternatives you can use anywhere.

Useful references

Canvas legacy alert classes

These examples use the built-in Canvas alert classes. They work, but are part of an older theme system and may change in future.

Known contrast issue: alert-success (3.74:1) and alert-error (3.74:1) both fall below the WCAG AA minimum of 4.5:1 for normal text — this is Canvas' own colour pairing, not something introduced by this guide. alert-info passes comfortably (8.33:1). If you need an accessible success or error message, use the inline-style alternatives below instead of the legacy classes.

Info: This is an alert alert-info message.
Success: This is an alert alert-success message.
<div class="alert alert-info" role="status">
  <strong>Info:</strong> This is an info alert.
</div>
<div class="alert alert-success" role="status">
  <strong>Success:</strong> This is a success alert.
</div>
<div class="alert alert-error" role="alert">
  <strong>Error:</strong> This is an error alert.
</div>

Modern inline-style alerts

Inline CSS offers more predictable results and does not depend on Canvas' legacy styles. These examples use padding, border-radius, background-color, and border-left to create accessible alert boxes.

Use role="status" for neutral or success messages, and role="alert" for critical errors.

Info: This is an inline-styled information alert.
Success: Action completed successfully.
<div role="status" style="padding: 1rem; border-radius: 0.375rem; background: #e8f2ff; border-left: 6px solid #4c9dcd;">
  <strong>Info:</strong> Inline-styled information alert.
</div>
<div role="status" style="padding: 1rem; border-radius: 0.375rem; background: #e8f8ea; border-left: 6px solid #2d8a3b;">
  <strong>Success:</strong> Action completed successfully.
</div>
<div role="alert" style="padding: 1rem; border-radius: 0.375rem; background: #fdeaea; border-left: 6px solid #cb2d6f;">
  <strong>Error:</strong> Something has gone wrong.
</div>

Accessibility notes

  • role="alert" should only be used for urgent, time-sensitive errors.
  • role="status" is appropriate for neutral or positive updates.
  • Keep a clear visual distinction between alert types.
  • Maintain colour contrast of at least AA for all text.
  • Avoid removing or overriding the browser's focus outline so keyboard users can navigate reliably.