Displays important messages to users.
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "success" | "warning" | "info" | default | Alert style variant |
| onDismiss | () => void | — | Callback fired when the dismiss button is clicked. When provided, a dismiss button is shown. |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Background | color.background | var(--background) | Alert background | |
| Border | color.border | var(--border) | Alert border | |
| Text | color.foreground | var(--foreground) | Alert text |
Different alert variants for various message types.
<Alert> <AlertTitle>Heads up!</AlertTitle> <AlertDescription>You can add components to your app using the CLI.</AlertDescription> </Alert> <Alert variant="destructive"> <AlertTitle>Error</AlertTitle> <AlertDescription>Your session has expired. Please sign in again.</AlertDescription> </Alert> <Alert variant="success"> <AlertTitle>Success</AlertTitle> <AlertDescription>Your changes have been saved successfully.</AlertDescription> </Alert> <Alert variant="warning"> <AlertTitle>Warning</AlertTitle> <AlertDescription>Your account is about to exceed its storage limit.</AlertDescription> </Alert> <Alert variant="info"> <AlertTitle>Information</AlertTitle> <AlertDescription>A new software update is available for download.</AlertDescription> </Alert>
Alerts can include icons for visual emphasis.
import { Info } from '@phosphor-icons/react';
<Alert variant="info">
<Info className="h-4 w-4" />
<AlertTitle>Information</AlertTitle>
<AlertDescription>
This is an informational message with an icon.
</AlertDescription>
</Alert>Alerts can be used without a title for simple messages.
import { Info } from '@phosphor-icons/react';
<Alert variant="info">
<Info className="h-4 w-4" />
<AlertDescription>
This is an informational message without a title.
</AlertDescription>
</Alert>Alerts can contain lists and other formatted content.
We've updated our documentation with the following sections:
import { FileText } from '@phosphor-icons/react';
<Alert>
<FileText className="h-4 w-4" />
<AlertTitle>New Documentation Available</AlertTitle>
<AlertDescription>
<p className="mb-2">We've updated our documentation with the following sections:</p>
<ul className="list-disc pl-4 space-y-1">
<li>Getting Started Guide</li>
<li>API Reference</li>
<li>Best Practices</li>
</ul>
</AlertDescription>
</Alert>Alerts can be dismissed by providing an onDismiss callback.
const [visible, setVisible] = useState(true);
{visible && (
<Alert variant="info" onDismiss={() => setVisible(false)}>
<AlertTitle>Dismissible Alert</AlertTitle>
<AlertDescription>
Click the X button to dismiss this alert.
</AlertDescription>
</Alert>
)}