Alert

1import { AlertCircleIcon, BadgeCheck } from 'lucide-react'
2
3import {
4    Alert,
5    AlertDescription,
6    AlertTitle,
7} from '@/components/ui/alert'
8
9export function AlertDemo() {
10    return (
11        <div className="grid w-full max-w-lg items-center gap-5">
12            <Alert>
13                <BadgeCheck />
14                <AlertTitle>
15                    Your account details have been successfully saved.
16                </AlertTitle>
17            </Alert>
18            <Alert>
19                <AlertCircleIcon />
20                <AlertTitle>New Message</AlertTitle>
21                <AlertDescription>
22                    <p>You have 3 unread messages in your inbox.</p>
23                    <ul className="list-inside list-disc text-sm">
24                        <li>Message from John</li>
25                        <li>Reminder: Meeting at 3 PM</li>
26                        <li>Verify billing address</li>
27                    </ul>
28                </AlertDescription>
29            </Alert>
30        </div>
31    )
32}
33

1import { BadgeInfo, CircleUserRound } from 'lucide-react'
2
3import { Alert, AlertTitle } from '@/components/ui/alert'
4
5export function AlertVariants() {
6    return (
7        <div className="grid w-full max-w-lg items-start gap-5">
8            <Alert variant={'default'}>
9                <CircleUserRound />
10                <AlertTitle>
11                    We’ve noticed unusual activity on your account.
12                </AlertTitle>
13            </Alert>
14            <Alert variant={'outline'}>
15                <BadgeInfo />
16                <AlertTitle>
17                    A new version of the application is now available.
18                </AlertTitle>
19            </Alert>
20        </div>
21    )
22}
23

1import { BadgeCheck, BadgeX, CircleAlert } from 'lucide-react'
2
3import {
4    Alert,
5    AlertDescription,
6    AlertTitle,
7} from '@/components/ui/alert'
8
9export function AlertStatus() {
10    return (
11        <div className="grid w-full max-w-lg items-start gap-5">
12            <Alert status={'success'}>
13                <BadgeCheck />
14                <AlertTitle>Payment Successful</AlertTitle>
15                <AlertDescription className="text-white">
16                    Your subscription has been activated. Enjoy full access to
17                    all features.{' '}
18                </AlertDescription>
19            </Alert>
20            <Alert status={'warning'}>
21                <CircleAlert />
22                <AlertTitle>Low Storage Space</AlertTitle>
23                <AlertDescription className="text-white">
24                    You’re running out of storage. Please upgrade your plan to
25                    avoid losing data.
26                </AlertDescription>
27            </Alert>
28            <Alert status={'error'}>
29                <BadgeX />
30                <AlertTitle>Login Failed</AlertTitle>
31                <AlertDescription className="text-white">
32                    Invalid email or password. Please try again or reset your
33                    password.
34                </AlertDescription>
35            </Alert>
36        </div>
37    )
38}
39