Alert

A short message that catches the user's eye. Use it to confirm that something worked, warn about a problem, share news, or show that a task is still running.

Composed of

Card: The surface the alert sits on

Works with

Button: Actions, like retry or dismiss
Loading: Spinner for tasks that are still running

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/alert.css" />

Default

An alert is an <article> with a role. It shares its surface with Card, so it needs no card class. Add role="alert" for urgent messages that should interrupt a screen reader, and role="status" for calmer ones like success or progress updates.

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

Dark mode and keyboard navigation shipped this week.

<article role="status">
  <svg><!-- icon --></svg>
  <strong>New features available</strong>
  <p>Dark mode and keyboard navigation shipped this week.</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 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></span>
  <strong>Processing your request</strong>
  <p>Please wait while we sync your data. This may take a few moments.</p>
</article>

API reference

Type	Classes / attributes	What it does
Color	`.primary` `.constructive` `.destructive` `.color1` `.color2` `.color3` `.color4` `.color5` `.color6`	Tints the icon and title