components
/components/ui/alert.tsx
/components/ui/alert.tsx
Installation
Usage
Imports
import {
Alert,
AlertContent,
AlertDescription,
AlertIcon,
AlertTitle,
AlertToolbar,
} from "@/components/ui/alert"Code
<Alert>
<AlertIcon>
<Bell size={16} />
</AlertIcon>
<AlertContent>
<AlertTitle>Alert Title</AlertTitle>
<AlertDescription>This is alert description.</AlertDescription>
</AlertContent>
<AlertToolbar>
<Button asChild variant="link">
<Link href="#">Action</Link>
</Button>
</AlertToolbar>
</Alert>Examples
Variants
Colors
On Close Functionality
Success Alert Examples
Error Alerts Examples
Info Alerts Examples
Warning Alert Examples
Props
<Alert>
| Name | Default | Values |
|---|---|---|
| color | primary | neutralprimaryinfosuccesswarningerror |
| variant | soft | softsoft-outlineoutlinestrong |
| close | false | boolean |
| onClose | - | () => void |