Alert

A static inline callout for state that persists — verify your email, payment failed, maintenance ahead. Toast announces events; Alert stays until the state changes.

Check your inbox

We sent a verification link to your email address. It expires in 24 hours.

tsx

import { MailCheck } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/registry/seam/ui/alert"

export default function AlertDemo() {
  return (
    <Alert className="max-w-md">
      <MailCheck />
      <AlertTitle>Check your inbox</AlertTitle>
      <AlertDescription>
        We sent a verification link to your email address. It expires in 24
        hours.
      </AlertDescription>
    </Alert>
  )
}

bunx --bun @seamui/cli@latest add alert

API

Prop	Type	Default	Description
variant	"default" \| "destructive"	"default"	Neutral muted well, or a destructive-tinted one for errors.

Compose Alert with AlertTitle, an optional AlertDescription, and an optional leading icon (any <svg> as the first child).

Notes

Deliberately still — an alert is persistent page state, so it gets no entrance or press motion. Transient feedback belongs to toast.
Debossed by design: persistent state reads as carved into the surface (shadow-well), where toast's transient key is raised on top of it.
Carries role="alert" so content that appears dynamically is announced by screen readers.
Variants stay on theme tokens — a warning variant is planned once the theme grows a warning color.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.