AlertDialog

Confirmation dialog requiring user action via Radix UI

Destructive

Usage

import { AlertDialog, AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogMedia, AlertDialogAction, AlertDialogCancel } from '@tryvienna/ui'

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Confirm Action</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Confirm</AlertDialogTitle>
      <AlertDialogDescription>Are you sure you want to proceed?</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Examples

Destructive

Destructive

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete Account</Button>
  </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 variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Default

Default

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Confirm Action</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Confirm</AlertDialogTitle>
      <AlertDialogDescription>Are you sure you want to proceed?</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Continue</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

API Reference

AlertDialog

Also accepts all props from AlertDialogPrimitive.Root.

AlertDialogTrigger

Also accepts all props from AlertDialogPrimitive.Trigger.

AlertDialogPortal

Also accepts all props from AlertDialogPrimitive.Portal.

AlertDialogOverlay

Also accepts all props from AlertDialogPrimitive.Overlay.

AlertDialogContent

Prop	Type	Default	Description
size	"default" | "sm"	default
onEscapeKeyDownProp	((event: KeyboardEvent) => void) | undefined	-

Also accepts all props from AlertDialogPrimitive.Content.

AlertDialogHeader

Also accepts all props from div.

AlertDialogFooter

Also accepts all props from div.

AlertDialogTitle

Also accepts all props from AlertDialogPrimitive.Title.

AlertDialogDescription

Also accepts all props from AlertDialogPrimitive.Description.

AlertDialogMedia

Also accepts all props from div.

AlertDialogAction

Prop	Type	Default	Description
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	default
size	"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	default

Also accepts all props from AlertDialogPrimitive.Action.

AlertDialogCancel

Prop	Type	Default	Description
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	outline
size	"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	default

Also accepts all props from AlertDialogPrimitive.Cancel.

Data Attributes

Component	data-slot
AlertDialog	"alert-dialog-content"
AlertDialogTrigger	"alert-dialog-trigger"
AlertDialogPortal	"alert-dialog-portal"
AlertDialogOverlay	"alert-dialog-overlay"
AlertDialogContent	"alert-dialog-content"
AlertDialogHeader	"alert-dialog-header"
AlertDialogFooter	"alert-dialog-footer"
AlertDialogTitle	"alert-dialog-title"
AlertDialogDescription	"alert-dialog-description"
AlertDialogMedia	"alert-dialog-media"
AlertDialogAction	"alert-dialog-action"
AlertDialogCancel	"alert-dialog-cancel"