Alert

1import {
2Alert,
3AlertIcon,
4AlertContent,
5AlertTitle,
6AlertDescription,
7} from "@ecos/ui";
8import { AlertCircle } from "lucide-react";
9
10<Alert variant="error">
11  <AlertIcon variant="error">
12    <AlertCircle size={16} />
13  </AlertIcon>
14
15  <AlertContent>
16    <AlertTitle>
17      Validation Error
18    </AlertTitle>
19
20    <AlertDescription>
21      Please review the highlighted
22      fields before continuing.
23    </AlertDescription>
24  </AlertContent>
25</Alert>

1<Alert variant="error"> ... </Alert>
2
3<Alert variant="warning"> ... </Alert>
4
5<Alert variant="success"> ... </Alert>

1<Alert variant="warning">
2  <AlertIcon variant="warning">
3    <AlertTriangle size={16} />
4  </AlertIcon>
5
6  <AlertContent>
7    <AlertTitle>
8      Outdated Information
9    </AlertTitle>
10
11    <AlertDescription>
12      This record may require review.
13    </AlertDescription>
14  </AlertContent>
15
16  <AlertAction>
17    <X size={16} />
18  </AlertAction>
19</Alert>

1<Alert variant="error">
2  <AlertIcon variant="error">
3    <AlertCircle size={16} />
4  </AlertIcon>
5
6  <AlertContent>
7    <AlertTitle>Payment Failed</AlertTitle>
8
9    <AlertDescription>
10      We couldn't process your payment method.
11    </AlertDescription>
12  </AlertContent>
13
14  <AlertAction className="text-sm font-medium underline">
15    Update Payment
16  </AlertAction>
17</Alert>

1<AlertIcon variant="error">
2  <AlertCircle size={16} />
3</AlertIcon>
4
5<AlertIcon variant="warning">
6  <AlertTriangle size={16} />
7</AlertIcon>
8
9<AlertIcon variant="success">
10  <CheckCircle2 size={16} />
11</AlertIcon>

1<Alert variant="success">
2  <AlertIcon variant="success">
3    <CheckCircle2 size={16} />
4  </AlertIcon>
5
6  <AlertContent>
7    <AlertTitle>
8      Profile Updated
9    </AlertTitle>
10
11    <AlertDescription>
12      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius
13      nostrum earum hic quibusdam nisi quaerat fugit sit repellendus,
14      dolor accusamus magni veniam veritatis pariatur maiores nihil atque
15      enim ex quo minus, nesciunt cum excepturi. Odio porro repellat,
16      quia possimus ipsum architecto similique!
17    </AlertDescription>
18  </AlertContent>
19</Alert>