Alert Dialog

Alert Dialog is a modal that interrupts the user with important content and waits for a response before continuing.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/alert-dialog.tsx

Import from@viliha/vui-react/alert-dialog

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

AlertDialogAction and AlertDialogCancel accept VUI Button variant/size props.

alert-dialog-demo.tsx

import {
  AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader,
  AlertDialogTitle, AlertDialogDescription, AlertDialogFooter,
  AlertDialogCancel, AlertDialogAction,
} from "@viliha/vui-react/alert-dialog";
import { Button } from "@viliha/vui-react/button";

export function Example() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

AlertDialog props

It takes no props of its own. Everything you pass reaches the underlying AlertDialogPrimitive.Root primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertDialogAction props

It takes no props of its own. Everything you pass reaches the underlying AlertDialogPrimitive.Action primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertDialogCancel props

It takes no props of its own. Everything you pass reaches the underlying AlertDialogPrimitive.Cancel primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertDialogContent props

Plus everything React.ComponentProps<typeof AlertDialogPrimitive.Content> accepts, passed straight through to the underlying element.

Prop	Type	Default
size?	"default" \| "sm"	"default"

AlertDialogDescription props

It takes no props of its own. Everything you pass reaches the underlying AlertDialogPrimitive.Description primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertDialogFooter props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertDialogHeader props

It takes no props of its own. Everything you pass reaches the underlying <div> element, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertDialogOverlay props

It takes no props of its own. Everything you pass reaches the underlying AlertDialogPrimitive.Overlay primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertDialogPortal props

It takes no props of its own. Everything you pass reaches the underlying AlertDialogPrimitive.Portal primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertDialogTitle props

It takes no props of its own. Everything you pass reaches the underlying AlertDialogPrimitive.Title primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

AlertDialogTrigger props

It takes no props of its own. Everything you pass reaches the underlying AlertDialogPrimitive.Trigger primitive, so every attribute it accepts works here unchanged and nothing is invented on top.