Alert

<div role="alert">

Contextual feedback messages for user actions or system states. Inline — not modal.

Overview

Preview

Update available

Version 2.1.0 is ready with performance improvements.

Deployment complete

Your changes are live. 3 files updated.

Approaching rate limit

You've used 85% of your monthly quota.

Build failed

Type error in src/api.ts:42 — Cannot read properties of undefined.

Variants

Info

Preview

Update available

Version 2.1.0 is ready.

<div role="status" class="flex items-start gap-3 rounded-lg border border-blue-800/40 bg-blue-950/20 px-4 py-3">
  <svg class="mt-0.5 h-4 w-4 shrink-0 text-blue-400" ...>...</svg>
  <div>
    <p class="text-sm font-semibold text-blue-300">Update available</p>
    <p class="mt-0.5 text-xs leading-relaxed text-blue-400/70">Version 2.1.0 is ready.</p>
  </div>
</div>

Success

Preview

Deployment complete

3 files updated and live.

<div role="status" class="flex items-start gap-3 rounded-lg border border-emerald-800/40 bg-emerald-950/20 px-4 py-3">
  ...
  <p class="text-sm font-semibold text-emerald-300">Deployment complete</p>
</div>

Warning

Preview

Approaching rate limit

You've used 85% of your quota.

<div role="status" class="flex items-start gap-3 rounded-lg border border-amber-800/40 bg-amber-950/20 px-4 py-3">
  ...
  <p class="text-sm font-semibold text-amber-300">Approaching rate limit</p>
</div>

Error

Preview

Build failed

Type error in src/api.ts:42.

<div role="alert" class="flex items-start gap-3 rounded-lg border border-red-800/40 bg-red-950/20 px-4 py-3">
  ...
  <p class="text-sm font-semibold text-red-300">Build failed</p>
</div>

Dismissible

Preview

New features available in settings.

<div role="status" class="relative flex items-start gap-3 rounded-lg border border-blue-800/40 bg-blue-950/20 px-4 py-3 pr-10">
  ...
  <button aria-label="Dismiss" class="absolute right-3 top-3 rounded text-blue-400/60 hover:text-blue-300 focus:outline-none focus-visible:ring-1 focus-visible:ring-blue-500">
    <svg class="h-4 w-4" ...>...</svg>
  </button>
</div>

Accessibility notes

• Use role="alert" for urgent messages (errors) — announced immediately by screen readers
• Use role="status" for non-urgent feedback (success, info, warnings)
• Never rely on color alone — always include an icon and text label