Alert Dialog in five frameworks

import { AlertDialog } from '@hamur/react/alert-dialog'

export default function AlertDialogExample() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger className="button danger">
        Delete project
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Backdrop className="backdrop" />
        <AlertDialog.Popup className="dialog">
          <AlertDialog.Title className="dialog-title">
            Delete this project?
          </AlertDialog.Title>
          <AlertDialog.Description className="muted">
            All of its files and settings will be removed for everyone.
          </AlertDialog.Description>
          <div className="actions">
            <AlertDialog.Close className="button">
              Cancel
            </AlertDialog.Close>
            <AlertDialog.Close className="button danger">
              Delete
            </AlertDialog.Close>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  )
}