ComponentsFeedback & loading
Alert
Shared primitiveExplain a persistent condition beside the affected task.
@/components/ui/alert
Composition preview
Try Alert alongside its related feedback & loading components. These examples keep all actions local.
Ready to review
Your changes have been saved.
No drafts yet
Create a draft when you have something to share.
Usage
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
<>
<Alert>
<AlertTitle>Changes saved</AlertTitle>
<AlertDescription>Your draft is ready to review.</AlertDescription>
</Alert>
</>Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.
API & composition
AlertTitle, AlertDescription; variant: default or destructive
Usage & accessibility
Describe a useful recovery action. Do not replace field-level errors with a distant alert.
Implementation contract
src/components/ui/alert.tsx
Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.