Docs
Alert Dialog
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
import type { AlertDialogTriggerProps } from "@kobalte/core/alert-dialog";
import {
AlertDialog,
AlertDialogAction,
AlertDialogClose,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@repo/tailwindcss/default/alert-dialog";
import { Button } from "@repo/tailwindcss/default/button";
const AlertDialogDemo = () => {
return (
<AlertDialog>
<AlertDialogTrigger
as={(props: AlertDialogTriggerProps) => (
<Button variant="outline" {...props}>
Show Dialog
</Button>
)}
/>
<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>
<AlertDialogClose>Cancel</AlertDialogClose>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
};
export default AlertDialogDemo;import type { AlertDialogTriggerProps } from "@kobalte/core/alert-dialog";
import {
AlertDialog,
AlertDialogAction,
AlertDialogClose,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@repo/tailwindcss/solid/alert-dialog";
import { Button } from "@repo/tailwindcss/solid/button";
const AlertDialogDemo = () => {
return (
<AlertDialog>
<AlertDialogTrigger
as={(props: AlertDialogTriggerProps) => (
<Button variant="outline" {...props}>
Show Dialog
</Button>
)}
/>
<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>
<AlertDialogClose>Cancel</AlertDialogClose>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
};
export default AlertDialogDemo;Installation
npx shadcn-solid@latest add alert-dialogInstall the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Install the following dependencies:
npm install @kobalte/coreCopy and paste the following code into your project:
Usage
import {
AlertDialog,
AlertDialogClose,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
AlertDialogAction
} from "@/components/ui/alert-dialog";<AlertDialog>
<AlertDialogTrigger>Open</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>