Alert Dialog example

How to use this alerDialog

Props

Root

NameTypeDefaultDescription
defaultOpenboolean-The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
openboolean-The controlled open state of the dialog. Must be used in conjunction with onOpenChange.
onOpenChange(open: boolean) => void-Event handler called when the open state of the dialog changes.

Trigger

NameTypeDefaultDescription
asChildbooleanfalseChange the default rendered element for the one passed as a child, merging their props and behavior.

Content

NameTypeDefaultDescription
asChildbooleanfalseChange the default rendered element for the one passed as a child, merging their props and behavior.
forceMountboolean-Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from AlertDialog.Portal.
onOpenAutoFocus(event: Event) => void-Event handler called when focus moves to the destructive action after opening. It can be prevented by calling event.preventDefault.
onCloseAutoFocus(event: Event) => void-Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
onEscapeKeyDown(event: KeyboardEvent) => void-Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.

Playground

Import from filigran-ui :

Import {AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from 'filigran-ui'


  <div className={tw(`flex gap-2`)}>
     <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Show Dialog</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>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </div>