Alert Dialog

Component

About

Here is Alert Dialog component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Alert Dialog to your project and fits it to your theme.

Code

How Alert Dialog is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from 'react';
import { AlertDialog } from '@base-ui-components/react/alert-dialog';

export default function ExampleAlertDialog() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-3.5 text-base font-medium text-red-800 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-red-400 dark:hover:bg-gray-800 dark:active:bg-gray-800 dark:focus-visible:outline-blue-400">
        Discard draft
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        {/* Backdrop: Opacity adjusted for dark mode */}
        <AlertDialog.Backdrop className="fixed inset-0 bg-black opacity-20 transition-all duration-150 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 dark:opacity-70" />
        <AlertDialog.Popup className="fixed top-1/2 left-1/2 -mt-8 w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 text-gray-900 outline outline-1 outline-gray-200 transition-all duration-150 data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[starting-style]:scale-90 data-[starting-style]:opacity-0 dark:bg-black dark:text-gray-100 dark:outline-gray-700">
          <AlertDialog.Title className="-mt-1.5 mb-1 text-lg font-medium">
            Discard draft?
          </AlertDialog.Title>
          <AlertDialog.Description className="mb-6 text-base text-gray-600 dark:text-gray-400">
            You can’t undo this action.
          </AlertDialog.Description>
          <div className="flex justify-end gap-4">
            {/* Cancel Button */}
            <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-white px-3.5 text-base font-medium text-gray-900 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-gray-700 dark:bg-black dark:text-gray-100 dark:hover:bg-gray-800 dark:active:bg-gray-800 dark:focus-visible:outline-blue-400">
              Cancel
            </AlertDialog.Close>
            {/* Discard Button */}
            <AlertDialog.Close className="flex h-10 items-center justify-center rounded-md border border-gray-200 bg-white px-3.5 text-base font-medium text-red-800 select-none hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-blue-800 active:bg-gray-100 dark:border-gray-700 dark:bg-black dark:text-red-400 dark:hover:bg-gray-800 dark:active:bg-gray-800 dark:focus-visible:outline-blue-400">
              Discard
            </AlertDialog.Close>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}