Alert Dialog - rafty/ui Docs

It is a modal dialog that interrupts the user with important content and expects a response.

This component is made on top of Radix UIs Alert Dialog Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible. If you need to apply your own styling you can use the isBarebone (to remove styling from entire component and its subcomponents) or isUnstyled (to remove styling from a particular subcomponent).

Anatomy

Import all parts and piece them together.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogOverlay,
  AlertDialogTitle,
  AlertDialogTrigger,
  AlertDialogDescription,
} from "@rafty/ui";

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogOverlay />
  <AlertDialogContent>
    <AlertDialogTitle />
    <AlertDialogDescription />
    <AlertDialogCancel />
    <AlertDialogAction />
  </AlertDialogContent>
</AlertDialog>;

Usage

Based on WAI-ARIA specifications, focus will be trapped to cancel action when the dialog opens, to prevent users from accidentally confirming the destructive action.

<AlertDialog>
  <AlertDialogTrigger>
    Open
  </AlertDialogTrigger>
  <AlertDialogOverlay />
  <AlertDialogContent>
    <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>
    <div className="flex items-center justify-between">
      <AlertDialogCancel asChild>
        <Button variant="outline">
          Cancel
        </Button>
      </AlertDialogCancel>
      <AlertDialogAction asChild>
        <Button colorScheme="error">
          Yes, delete account
        </Button>
      </AlertDialogAction>
    </div>
  </AlertDialogContent>
</AlertDialog>

Size

There are 4 size options in alert dialog component: sm, md (default), lg & xl.

<AlertDialog size="sm">
  <AlertDialogTrigger>
    Open
  </AlertDialogTrigger>
  <AlertDialogOverlay />
  <AlertDialogContent>
    <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>
    <AlertDialogCancel asChild>
      <Button
        className="w-max"
        size="sm"
      >
        Close
      </Button>
    </AlertDialogCancel>
  </AlertDialogContent>
</AlertDialog>

Barebone

Pass isBarebone prop to remove style in Alert Dialog

<AlertDialog isBarebone>
  <AlertDialogTrigger className="hover:bg-secondary-200 dark:hover:bg-secondary-800 rounded-lg p-2 px-4 dark:text-white">
    Open
  </AlertDialogTrigger>
  <AlertDialogOverlay className="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-white/70 backdrop-blur-sm dark:bg-black/60" />
  <AlertDialogContent className="dark:bg-secondary-800 dark:text-secondary-50 dark:border-secondary-700 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%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-4 shadow-lg duration-200 sm:rounded-lg md:w-full">
    <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>
    <AlertDialogCancel asChild>
      <Button
        className="w-max"
        size="sm"
      >
        Close
      </Button>
    </AlertDialogCancel>
  </AlertDialogContent>
</AlertDialog>

Unstyled

Pass isUnstyled prop to remove style from a sub component

<AlertDialog>
  <AlertDialogTrigger
    className="dark:text-secondary-100 hover:bg-secondary-200 dark:hover:bg-secondary-800 dark:bg-secondary-900 rounded-md p-2 px-6"
    isUnstyled
  >
    Open
  </AlertDialogTrigger>
  <AlertDialogOverlay />
  <AlertDialogContent>
    <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>
    <AlertDialogCancel asChild>
      <Button
        className="w-max"
        size="sm"
      >
        Close
      </Button>
    </AlertDialogCancel>
  </AlertDialogContent>
</AlertDialog>

Aschild

Our Button component is forwarded within the Alert Dialog Trigger component, enabling you to utilize all button props in the trigger. Additionally, if you wish to use your own trigger, you can use the asChild prop.

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>
      Open
    </Button>
  </AlertDialogTrigger>
  <AlertDialogOverlay />
  <AlertDialogContent>
    <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>
    <AlertDialogCancel asChild>
      <Button
        className="w-max"
        size="sm"
      >
        Close
      </Button>
    </AlertDialogCancel>
  </AlertDialogContent>
</AlertDialog>

API

Root

Property	Description	Type	Default
isbareBone	Removes style from whole component	`boolean`	false

Trigger

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`	false

Overlay

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`	false

Content

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`	false

Title

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`	false

Description

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`	false