Alert

uistable

Alert — extracted 1:1 from WEM-App.

npx shadcn add @krawma/alert

npm: class-variance-authority@^0.7.1 · registry: @krawma/utils

Preview

Heads up

A short, token-styled alert.

Variants

defaultdestructive

Depends on

utils

Purpose

An inline, static callout for information the user should notice in context — a note, a warning, or an error summary. It is not a transient notification (use sonner) and not a modal confirmation (use alert-dialog).

Anatomy

Alert (role="alert") › optional icon, AlertTitle, AlertDescription.

Style

variant (default default): default (neutral/informational) and destructive (error/danger, token --destructive).
Token-backed; a leading icon is auto-laid-out.

Behavior & functionality

Static container — no state or interaction. Persistent until the surrounding UI removes it.

Accessibility

Uses role="alert", so screen readers announce it when it appears — mount it in response to an event rather than rendering it always-present.
Convey severity with text (AlertTitle), not color alone.

Do / Don't

✅ Use destructive for error summaries; pair with a title.
❌ Don't use for ephemeral success toasts — that's sonner.
❌ Don't use for blocking confirmations — that's alert-dialog.