Zaidan

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Installation

CLI

npx shadcn@latest add @zaidan/alert-dialog

pnpx shadcn add @zaidan/alert-dialog

yarn dlx shadcn@latest add @zaidan/alert-dialog

bunx shadcn@latest add @zaidan/alert-dialog

Manual

Copy and paste the following code into your project.

1
import * as AlertDialogPrimitive from "@kobalte/core/alert-dialog";
2
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3
import type { Component, ComponentProps, ValidComponent } from "solid-js";
4
import { mergeProps, splitProps } from "solid-js";
5

6
import { cn } from "~/lib/utils";
7
import { Button, type ButtonProps } from "~/components/ui/button";
8

9
const AlertDialog: Component<AlertDialogPrimitive.AlertDialogRootProps> = (props) => {
10
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
11
};
12

13
type AlertDialogTriggerProps<T extends ValidComponent = "button"> = PolymorphicProps<
14
  T,
15
  AlertDialogPrimitive.AlertDialogTriggerProps<T>
16
>;
17

18
const AlertDialogTrigger = <T extends ValidComponent = "button">(
19
  props: AlertDialogTriggerProps<T>,
20
) => {
21
  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
22
};
23

24
const AlertDialogPortal: Component<AlertDialogPrimitive.AlertDialogPortalProps> = (props) => {
25
  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
26
};
27

28
type AlertDialogOverlayProps<T extends ValidComponent = "div"> = PolymorphicProps<
29
  T,
30
  AlertDialogPrimitive.AlertDialogOverlayProps<T>
31
> &
32
  Pick<ComponentProps<T>, "class">;
33

34
const AlertDialogOverlay = <T extends ValidComponent = "div">(
35
  props: AlertDialogOverlayProps<T>,
36
) => {
37
  const [local, others] = splitProps(props as AlertDialogOverlayProps, ["class"]);
38
  return (
39
    <AlertDialogPrimitive.Overlay
40
      class={cn("fixed inset-0 z-50 z-alert-dialog-overlay", local.class)}
41
      data-slot="alert-dialog-overlay"
42
      {...others}
43
    />
44
  );
45
};
46

47
type AlertDialogContentProps<T extends ValidComponent = "div"> = PolymorphicProps<
48
  T,
49
  AlertDialogPrimitive.AlertDialogContentProps<T>
50
> &
51
  Pick<ComponentProps<T>, "class"> & { size?: "default" | "sm" };
52

53
const AlertDialogContent = <T extends ValidComponent = "div">(
54
  props: AlertDialogContentProps<T>,
55
) => {
56
  const mergedProps = mergeProps({ size: "default" } as AlertDialogContentProps, props);
57
  const [local, others] = splitProps(mergedProps, ["class", "size"]);
58
  return (
59
    <AlertDialogPortal>
60
      <AlertDialogOverlay />
61
      <AlertDialogPrimitive.Content
62
        class={cn(
63
          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 z-alert-dialog-content grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
64
          local.class,
65
        )}
66
        data-size={local.size}
67
        data-slot="alert-dialog-content"
68
        {...others}
69
      />
70
    </AlertDialogPortal>
71
  );
72
};
73

74
type AlertDialogHeaderProps = ComponentProps<"div">;
75

76
const AlertDialogHeader = (props: AlertDialogHeaderProps) => {
77
  const [local, others] = splitProps(props, ["class"]);
78
  return (
79
    <div
80
      class={cn("z-alert-dialog-header", local.class)}
81
      data-slot="alert-dialog-header"
82
      {...others}
83
    />
84
  );
85
};
86

87
type AlertDialogFooterProps = ComponentProps<"div">;
88

89
const AlertDialogFooter = (props: AlertDialogFooterProps) => {
90
  const [local, others] = splitProps(props, ["class"]);
91
  return (
92
    <div
93
      data-slot="alert-dialog-footer"
94
      class={cn(
95
        "z-alert-dialog-footer flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
96
        local.class,
97
      )}
98
      {...others}
99
    />
100
  );
101
};
102

103
type AlertDialogMediaProps = ComponentProps<"div">;
104

105
const AlertDialogMedia = (props: AlertDialogMediaProps) => {
106
  const [local, others] = splitProps(props, ["class"]);
107
  return (
108
    <div
109
      data-slot="alert-dialog-media"
110
      class={cn("z-alert-dialog-media", local.class)}
111
      {...others}
112
    />
113
  );
114
};
115

116
type AlertDialogTitleProps<T extends ValidComponent = "h2"> = PolymorphicProps<
117
  T,
118
  AlertDialogPrimitive.AlertDialogTitleProps<T>
119
> &
120
  Pick<ComponentProps<T>, "class">;
121

122
const AlertDialogTitle = <T extends ValidComponent = "h2">(props: AlertDialogTitleProps<T>) => {
123
  const [local, others] = splitProps(props as AlertDialogTitleProps, ["class"]);
124
  return (
125
    <AlertDialogPrimitive.Title
126
      class={cn("z-alert-dialog-title", local.class)}
127
      data-slot="alert-dialog-title"
128
      {...others}
129
    />
130
  );
131
};
132

133
type AlertDialogDescriptionProps<T extends ValidComponent = "p"> = PolymorphicProps<
134
  T,
135
  AlertDialogPrimitive.AlertDialogDescriptionProps<T>
136
> &
137
  Pick<ComponentProps<T>, "class">;
138

139
const AlertDialogDescription = <T extends ValidComponent = "p">(
140
  props: AlertDialogDescriptionProps<T>,
141
) => {
142
  const [local, others] = splitProps(props as AlertDialogDescriptionProps, ["class"]);
143
  return (
144
    <AlertDialogPrimitive.Description
145
      class={cn("z-alert-dialog-description", local.class)}
146
      data-slot="alert-dialog-description"
147
      {...others}
148
    />
149
  );
150
};
151

152
type AlertDialogActionProps<T extends ValidComponent = "button"> = PolymorphicProps<
153
  T,
154
  AlertDialogPrimitive.AlertDialogCloseButtonProps<T>
155
> &
156
  Pick<ButtonProps, "variant" | "size" | "class">;
157

158
const AlertDialogAction = <T extends ValidComponent = "button">(
159
  props: AlertDialogActionProps<T>,
160
) => {
161
  const mergedProps = mergeProps({ variant: "default", size: "default" }, props);
162
  const [local, others] = splitProps(mergedProps as AlertDialogActionProps, [
163
    "class",
164
    "variant",
165
    "size",
166
  ]);
167
  return (
168
    <AlertDialogPrimitive.CloseButton
169
      as={Button}
170
      size={local.size}
171
      variant={local.variant}
172
      data-slot="alert-dialog-action"
173
      class={cn("z-alert-dialog-action", local.class)}
174
      {...others}
175
    />
176
  );
177
};
178

179
type AlertDialogCancelProps<T extends ValidComponent = "button"> = PolymorphicProps<
180
  T,
181
  AlertDialogPrimitive.AlertDialogCloseButtonProps<T>
182
> &
183
  Pick<ButtonProps, "variant" | "size" | "class">;
184

185
const AlertDialogCancel = <T extends ValidComponent = "button">(
186
  props: AlertDialogCancelProps<T>,
187
) => {
188
  const mergedProps = mergeProps({ variant: "outline", size: "default" }, props);
189
  const [local, others] = splitProps(mergedProps as AlertDialogCancelProps, [
190
    "class",
191
    "variant",
192
    "size",
193
  ]);
194
  return (
195
    <AlertDialogPrimitive.CloseButton
196
      as={Button}
197
      size={local.size}
198
      variant={local.variant}
199
      data-slot="alert-dialog-cancel"
200
      class={cn("z-alert-dialog-cancel", local.class)}
201
      {...others}
202
    />
203
  );
204
};
205

206
export {
207
  AlertDialog,
208
  AlertDialogAction,
209
  AlertDialogCancel,
210
  AlertDialogContent,
211
  AlertDialogDescription,
212
  AlertDialogFooter,
213
  AlertDialogHeader,
214
  AlertDialogMedia,
215
  AlertDialogOverlay,
216
  AlertDialogPortal,
217
  AlertDialogTitle,
218
  AlertDialogTrigger,
219
};

Examples

Here are the source code of all the examples from the preview page:

Basic

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { Button } from "~/components/ui/button";

function AlertDialogBasic() {
  return (
    <Example title="Basic" class="items-center">
      <AlertDialog>
        <AlertDialogTrigger as={Button} variant="outline">
          Default
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your account and remove
              your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Example>
  );
}

Small

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { Button } from "~/components/ui/button";

function AlertDialogSmall() {
  return (
    <Example title="Small" class="items-center">
      <AlertDialog>
        <AlertDialogTrigger as={Button} variant="outline">
          Small
        </AlertDialogTrigger>
        <AlertDialogContent size="sm">
          <AlertDialogHeader>
            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
            <AlertDialogDescription>
              Do you want to allow the USB accessory to connect to this device?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Don't allow</AlertDialogCancel>
            <AlertDialogAction>Allow</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Example>
  );
}

With Media

import { Bluetooth } from "lucide-solid";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { Button } from "~/components/ui/button";

function AlertDialogWithMedia() {
  return (
    <Example title="With Media" class="items-center">
      <AlertDialog>
        <AlertDialogTrigger as={Button} variant="outline">
          Default (Media)
        </AlertDialogTrigger>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogMedia>
              <Bluetooth />
            </AlertDialogMedia>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This will permanently delete your account and remove your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Example>
  );
}

Small With Media

import { Bluetooth } from "lucide-solid";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { Button } from "~/components/ui/button";

function AlertDialogSmallWithMedia() {
  return (
    <Example title="Small With Media" class="items-center">
      <AlertDialog>
        <AlertDialogTrigger as={Button} variant="outline">
          Small (Media)
        </AlertDialogTrigger>

        <AlertDialogContent size="sm">
          <AlertDialogHeader>
            <AlertDialogMedia>
              <Bluetooth />
            </AlertDialogMedia>
            <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
            <AlertDialogDescription>
              Do you want to allow the USB accessory to connect to this device?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Don't allow</AlertDialogCancel>
            <AlertDialogAction>Allow</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Example>
  );
}

Destructive

import { Trash2 } from "lucide-solid";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { Button } from "~/components/ui/button";

function AlertDialogDestructive() {
  return (
    <Example title="Destructive" class="items-center">
      <AlertDialog>
        <AlertDialogTrigger as={Button} variant="destructive">
          Delete Chat
        </AlertDialogTrigger>
        <AlertDialogContent size="sm">
          <AlertDialogHeader>
            <AlertDialogMedia class="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
              <Trash2 />
            </AlertDialogMedia>
            <AlertDialogTitle>Delete chat?</AlertDialogTitle>
            <AlertDialogDescription>
              This will permanently delete this chat conversation. View <a href="#">Settings</a>{" "}
              delete any memories saved during this chat.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel variant="ghost">Cancel</AlertDialogCancel>
            <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </Example>
  );
}

In Dialog

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "~/components/ui/alert-dialog";
import { Button } from "~/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "~/components/ui/dialog";

function AlertDialogInDialog() {
  return (
    <Example title="In Dialog" class="items-center">
      <Dialog>
        <DialogTrigger as={Button} variant="outline">
          Open Dialog
        </DialogTrigger>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Alert Dialog Example</DialogTitle>
            <DialogDescription>Click the button below to open an alert dialog.</DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <AlertDialog>
              <AlertDialogTrigger as={Button}>Open Alert Dialog</AlertDialogTrigger>
              <AlertDialogContent size="sm">
                <AlertDialogHeader>
                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                  <AlertDialogDescription>
                    This action cannot be undone. This will permanently delete your account and
                    remove your data from our servers.
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                  <AlertDialogAction>Continue</AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </Example>
  );
}

Preview Docs

Build your own Zaidan

When you're done, click Setup Project to setup your new project.