Alert Dialog

Basic alert dialog example demonstrating core behavior.

Package: @solidiom/alert-dialog
Version: 0.0.1-next.0
Status: stable

Examples

import * as AlertDialog from "@solidiom/alert-dialog"

;<>
  <AlertDialog.Root defaultOpen={false} onOpenChange={(open) => console.log(open)}>
    <AlertDialog.Trigger>Delete Account</AlertDialog.Trigger>

    <AlertDialog.Portal>
      <AlertDialog.Content>
        <AlertDialog.Title>Delete your account?</AlertDialog.Title>
        <AlertDialog.Description>
          This action cannot be undone. All your data will be permanently removed.
        </AlertDialog.Description>

        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 16 }}>
          <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
          <AlertDialog.Action onAction={() => console.log("Account deleted")}>
            Delete
          </AlertDialog.Action>
        </div>
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog.Root>
</>

Unlike a regular dialog, the alert dialog does not dismiss on click-outside or Escape key. The user must explicitly click either the Cancel or Action button to close it.

View source

        export function Root(props: AlertDialogRootProps) {
  const baseId = createStableId("alert-dialog")

  const { open, requestOpenChange } = createDisclosureState({
    open: props.open,
    defaultOpen: props.defaultOpen,
    onOpenChange: props.onOpenChange,
  })

  const presence = createPresence({ open })

  const ctx: AlertDialogContextValue = {
    open,
    requestOpenChange,
    contentId: `${baseId}-content`,
    titleId: `${baseId}-title`,
    descriptionId: `${baseId}-description`,
    triggerId: `${baseId}-trigger`,
    phase: presence.phase,
    present: presence.present,
  }

  return <AlertDialogContext value={ctx}>{props.children}</AlertDialogContext>
}