Alert

Contextual feedback message for user actions or system events, with optional dismiss and action.

Heads up

Something you should know.

Installation

npx paubha@latest add alert

import { Alert } from "@/components/ui/alert";

<Alert variant="success" title="Saved" description="Your changes have been saved." />

Info

A short description of what happened.

Success

A short description of what happened.

Warning

A short description of what happened.

Error

A short description of what happened.

Upload failed

The file exceeds the 10MB size limit.

Prop	Type	Default	Description
variant	"info" \| "success" \| "warning" \| "error"	"info"	Color treatment and icon. Also determines the role: warning/error use role=alert, info/success use role=status.
title	ReactNode	—	Bold heading line.
description	ReactNode	—	Body text, always fg-secondary regardless of variant.
actionLabel	ReactNode	—	Renders a text-style action button when present.
onAction	() => void	—	Called when the action button is clicked.
dismissible	boolean	false	Shows a dismiss button with aria-label="Dismiss".
onDismiss	() => void	—	Called when the dismiss button is clicked.

Role is variant-dependent. warning/error use role="alert" (assertive, interrupting); info/success use role="status" (polite). This is computed automatically from the variant prop, not something you set yourself.
Icon. Decorative, aria-hidden.
Dismiss button. aria-label="Dismiss".