ComponentsFeedback
Alert
Static inline callout for important messages with semantic variants.
Variants
Alert provides semantic variants for different message types. Each variant uses distinct color tokens that adapt across themes.
Heads up
This is a default informational alert.
Error
Your session has expired. Please log in again.
Success
Your changes have been saved.
Warning
This action cannot be undone.
Description Only
AlertTitle is optional. Use AlertDescription alone for simpler inline messages.
You can customize your notification preferences in settings.
Installation
npx visor add alertThis copies two files into your project:
components/ui/alert/alert.tsx— the componentcomponents/ui/alert/alert.module.css— the styles
Usage
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert/alert';
<Alert variant="destructive">
<AlertTitle>Error</AlertTitle>
<AlertDescription>Something went wrong.</AlertDescription>
</Alert>API Reference
AlertProps
No props data available for “alert”.
The component also accepts all standard <div> HTML attributes.
Sub-components
AlertTitle— Bold heading text for the alert message. Accepts all<div>attributes.AlertDescription— Secondary descriptive text below the title. Accepts all<div>attributes.
Accessibility
- Renders with
role="alert", which announces the content to screen readers immediately. - Use
AlertTitleto provide a concise summary that screen readers announce first. - For non-urgent messages, consider using Banner with
role="status"instead.