Alert Dialog
Boite de dialogue modale pour confirmer des actions destructrices ou importantes. Installez Alert Dialog depuis le registre VLLNT UI avec la CLI shadcn.
Boite de dialogue modale pour confirmer des actions destructrices ou importantes. Fait partie de la famille overlay dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Alert Dialog a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/alert-dialog.jsonSource
"use client";
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
import { cn } from "../../lib/utils";
import { buttonVariants } from "../button/button";
const AlertDialog = AlertDialogPrimitive.Root;
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
const AlertDialogPortal = AlertDialogPrimitive.Portal;
const AlertDialogOverlay = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Overlay>>;
}) => (
<AlertDialogPrimitive.Overlay
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
)}
{...props}
ref={ref}
/>
);
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
const AlertDialogContent = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Content>>;
}) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<AlertDialogPrimitive.Content
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
className,
)}
ref={ref}
{...props}
/>
</AlertDialogPortal>
);
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
const AlertDialogHeader = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className,
)}
{...props}
/>
);
AlertDialogHeader.displayName = "AlertDialogHeader";
const AlertDialogFooter = ({
className,
...props
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className,
)}
{...props}
/>
);
AlertDialogFooter.displayName = "AlertDialogFooter";
const AlertDialogTitle = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Title>>;
}) => (
<AlertDialogPrimitive.Title
className={cn("text-lg font-semibold", className)}
ref={ref}
{...props}
/>
);
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
const AlertDialogDescription = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Description>>;
}) => (
<AlertDialogPrimitive.Description
className={cn("text-sm text-muted-foreground", className)}
ref={ref}
{...props}
/>
);
AlertDialogDescription.displayName =
AlertDialogPrimitive.Description.displayName;
const AlertDialogAction = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Action>>;
}) => (
<AlertDialogPrimitive.Action
className={cn(buttonVariants(), className)}
ref={ref}
{...props}
/>
);
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
const AlertDialogCancel = ({
className,
ref,
...props
}: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Cancel>>;
}) => (
<AlertDialogPrimitive.Cancel
className={cn(
buttonVariants({ variant: "outline" }),
"mt-2 sm:mt-0",
className,
)}
ref={ref}
{...props}
/>
);
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
export {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
AlertDialogPortal,
AlertDialogTitle,
AlertDialogTrigger,
};
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.