Alert
Used to highlight important messages.
alert-demo.tsx
import { AlertTriangleIcon } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
export function AlertDemo() {
return (
<Alert>
<AlertTriangleIcon />
<AlertTitle>No Internet Connection</AlertTitle>
<AlertDescription>
Please check your internet connection and try again.
</AlertDescription>
</Alert>
)
}
Installation
npx shadcn@latest add https://9ui.dev/r/alert.json
Usage
Imports
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
Anatomy
<Alert>
<AlertTitle />
<AlertDescription />
</Alert>
Examples
Success
alert-success.tsx
import { CircleCheckIcon } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
export function AlertSuccess() {
return (
<Alert variant="success">
<CircleCheckIcon />
<AlertTitle>Your account has been created</AlertTitle>
<AlertDescription>
You can now sign in with your new account credentials.
</AlertDescription>
</Alert>
)
}
Info
alert-info.tsx
import { InfoIcon } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
export function AlertInfo() {
return (
<Alert variant="info">
<InfoIcon />
<AlertTitle>Browser Update Available</AlertTitle>
<AlertDescription>
A new version of your browser is available. Updating your browser
ensures better security and performance.
</AlertDescription>
</Alert>
)
}
Warning
alert-warning.tsx
import { AlertTriangleIcon } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
export function AlertWarning() {
return (
<Alert variant="warning">
<AlertTriangleIcon />
<AlertTitle>Your session is about to expire</AlertTitle>
<AlertDescription>
You will be logged out in 5 minutes. Please save your work and refresh
the page.
</AlertDescription>
</Alert>
)
}
Danger
alert-danger.tsx
import { XCircleIcon } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
export function AlertDanger() {
return (
<Alert variant="danger">
<XCircleIcon />
<AlertTitle>Your subscription has been canceled</AlertTitle>
<AlertDescription>
Your access to premium features will end in 30 days. You can reactivate
your subscription anytime.
</AlertDescription>
</Alert>
)
}
With action
alert-with-action.tsx
import { AlertTriangleIcon } from "lucide-react"
import { Alert, AlertTitle } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
export function AlertWithAction() {
return (
<Alert>
<AlertTriangleIcon />
<AlertTitle className="line-clamp-1 max-w-[calc(100%-4rem)] overflow-ellipsis">
No Internet Connection
</AlertTitle>
<Button
className="absolute top-1/2 right-4 h-6 -translate-y-1/2 shadow-none"
size="sm"
variant="outline"
>
Try Again
</Button>
</Alert>
)
}