Alert

An <article> with role="alert" or role="status", reusing the same card surface as Card. Use role="alert" for urgent messages that should interrupt a screen reader, and role="status" for calmer ones like success or progress updates.

Default

Icon, <strong> title, and <p> description as direct children. Color variants (primary, constructive, destructive, color1 through color6) tint the icon and title, same as Badge.

New features available

Check out our latest updates including dark mode support and improved accessibility features.

<article role="status">
  <svg><!-- icon --></svg>
  <strong>New features available</strong>
  <p>
    Check out our latest updates including dark mode support and improved
    accessibility features.
  </p>
</article>

Colors

Same color modifiers as Badge: primary, constructive, destructive, and color1 through color6. They tint the icon and title, the description stays neutral.

Scheduled maintenance

Our services will be unavailable on Sunday, March 15th from 2:00 AM to 6:00 AM UTC for scheduled maintenance.

<article role="alert" class="color2">
  <svg><!-- icon --></svg>
  <strong>Scheduled maintenance</strong>
  <p>
    Our services will be unavailable on Sunday, March 15th from 2:00 AM to 6:00
    AM UTC for scheduled maintenance.
  </p>
</article>

With action

A trailing <button> stays vertically centered next to the content.

Update available

A new version of the application is available. Please refresh to get the latest features and bug fixes.

<article role="status" class="primary">
  <svg><!-- icon --></svg>
  <strong>Update available</strong>
  <p>A new version of the application is available.</p>
  <button>Refresh</button>
</article>

With list

A <ul> as a direct child lines up under the title and description, and still leaves room for a trailing action.

Unable to connect to server

We're experiencing connection issues. Please try the following:

Check your internet connection
Refresh the page
Clear your browser cache

<article role="alert" class="destructive">
  <svg><!-- icon --></svg>
  <strong>Unable to connect to server</strong>
  <p>We're experiencing connection issues. Please try the following:</p>
  <ul>
    <li>Check your internet connection</li>
    <li>Refresh the page</li>
    <li>Clear your browser cache</li>
  </ul>
  <button class="destructive">Retry</button>
</article>

Steps to reset your password

Follow these steps in order:

Open the account settings page
Click "Reset password"
Check your email for a confirmation link

<article role="status" class="primary">
  <svg><!-- icon --></svg>
  <strong>Steps to reset your password</strong>
  <p>Follow these steps in order:</p>
  <ol>
    <li>Open the account settings page</li>
    <li>Click "Reset password"</li>
    <li>Check your email for a confirmation link</li>
  </ol>
</article>

Dismissible

Pair a ghost square round button with onclick to close the alert, same pattern as anywhere else in @erikt/ui.

Profile updated successfully

<article role="status" class="constructive">
  <svg><!-- icon --></svg>
  <strong>Profile updated successfully</strong>
  <button
    class="ghost square round"
    aria-label="Dismiss"
    onclick="this.closest('article').remove()"
  >
    <svg><!-- x icon --></svg>
  </button>
</article>

Loading

Swap the icon for an element with aria-busy="true" to get the built-in spinner.

Processing your request

Please wait while we sync your data. This may take a few moments.

<article role="status" class="primary">
  <span aria-busy="true"></span>
  <strong>Processing your request</strong>
  <p>Please wait while we sync your data. This may take a few moments.</p>
</article>