Alerts

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

• MDN: role="alert"
• MDN: role="status"
• WCAG contrast guidance

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.

<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.

<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.