Alert

1import {
2  Example,
3  ExampleWrapper,
4} from "@/registry/bases/radix/components/example"
5import {
6  Alert,
7  AlertAction,
8  AlertDescription,
9  AlertTitle,
10} from "@/registry/bases/radix/ui/alert"
11import { Badge } from "@/registry/bases/radix/ui/badge"
12import { Button } from "@/registry/bases/radix/ui/button"
13import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
14 
15export default function AlertExample() {
16  return (
17    <ExampleWrapper className="lg:grid-cols-1">
18      <AlertExample1 />
19      <AlertExample2 />
20      <AlertExample3 />
21      <AlertExample4 />
22    </ExampleWrapper>
23  )
24}
25 
26function AlertExample1() {
27  return (
28    <Example title="Basic">
29      <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
30        <Alert>
31          <AlertTitle>Success! Your changes have been saved.</AlertTitle>
32        </Alert>
33        <Alert>
34          <AlertTitle>Success! Your changes have been saved.</AlertTitle>
35          <AlertDescription>
36            This is an alert with title and description.
37          </AlertDescription>
38        </Alert>
39        <Alert>
40          <AlertDescription>
41            This one has a description only. No title. No icon.
42          </AlertDescription>
43        </Alert>
44      </div>
45    </Example>
46  )
47}
48 
49function AlertExample2() {
50  return (
51    <Example title="With Icons">
52      <div className="mx-auto flex w-full max-w-lg flex-col gap-4">
53        <Alert>
54          <IconPlaceholder
55            lucide="CircleAlertIcon"
56            tabler="IconExclamationCircle"
57            hugeicons="AlertCircleIcon"
58            phosphor="WarningCircleIcon"
59          />
60          <AlertTitle>
61            Let&apos;s try one with icon, title and a <a href="#">link</a>.
62          </AlertTitle>
63        </Alert>
64        <Alert>
65          <IconPlaceholder
66            lucide="CircleAlertIcon"
67            tabler="IconExclamationCircle"
68            hugeicons="AlertCircleIcon"
69            phosphor="WarningCircleIcon"
70          />
71          <AlertDescription>
72            This one has an icon and a description only. No title.{" "}
73            <a href="#">But it has a link</a> and a <a href="#">second link</a>.
74          </AlertDescription>
75        </Alert>
76 
77        <Alert>
78          <IconPlaceholder
79            lucide="CircleAlertIcon"
80            tabler="IconExclamationCircle"
81            hugeicons="AlertCircleIcon"
82            phosphor="WarningCircleIcon"
83          />
84// … truncated