Alert Dialog
A dialog that requires user response to proceed.
Alert Dialog wraps the
Base UI Alert Dialog
primitive, composes Button through Base UI's render prop,
and marks each part with data-slot. It is a client component: it uses a
portal, manages focus, and animates with tw-animate-css.
Installation
npx shadcn@latest add @kosori/alert-dialogExample
alert-dialog-example.tsx
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
const AlertDialogExample = () => (
<AlertDialog>
<AlertDialogTrigger render={<Button variant='outline' />}>
Show Dialog
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your
account from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
export default AlertDialogExample;
Usage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
const AlertDialogDemo = () => (
<AlertDialog>
<AlertDialogTrigger render={<Button variant='outline' />}>
Show Dialog
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your
account from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);Media
AlertDialogMedia adds an icon or image above the title.
import { IconBluetooth } from '@tabler/icons-react';
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogMedia,
AlertDialogTitle,
AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { Button } from '@/components/ui/button';
const AlertDialogWithMedia = () => (
<AlertDialog>
<AlertDialogTrigger render={<Button variant='outline' />}>
Share Project
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogMedia>
<IconBluetooth />
</AlertDialogMedia>
<AlertDialogTitle>Share this project?</AlertDialogTitle>
<AlertDialogDescription>
Anyone with the link can view and comment on it.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Share</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);