Alert Dialog

Installation#

npmpnpmyarnbun

npx sugarcoat add alert-dialog

Examples#

Default#

Default

Delete Confirmation#

Delete Confirmation

Discard Changes#

Discard Changes

Logout Confirmation#

Logout

Controlled Alert Dialog#

Controlled

With Custom Content#

Custom Content

Dangerous Action with Input#

Dangerous Action

Alert Dialog vs Dialog#

Use Alert Dialog when:

The action is destructive or irreversible
The user must acknowledge or make a decision before continuing
The dialog should not be dismissible by clicking outside

Use Dialog when:

Displaying informational content
Collecting user input (forms)
The user can dismiss without making a decision

Anatomy#

<AlertDialog>
  <AlertDialog.Trigger>
    <button>Open</button>
  </AlertDialog.Trigger>
  <AlertDialog.Portal>
    <AlertDialog.Backdrop />
    <AlertDialog.Popup>
      <AlertDialog.Title>Title</AlertDialog.Title>
      <AlertDialog.Description>Description</AlertDialog.Description>
      <AlertDialog.Footer>
        <AlertDialog.Cancel>
          <button>Cancel</button>
        </AlertDialog.Cancel>
        <AlertDialog.Action>
          <button>Confirm</button>
        </AlertDialog.Action>
      </AlertDialog.Footer>
    </AlertDialog.Popup>
  </AlertDialog.Portal>
</AlertDialog>

Usage#

Import

import { AlertDialog } from "@sugarcoat/ui-nxt";

Usage

<AlertDialog>
<AlertDialog.Trigger>
  <button>Delete</button>
</AlertDialog.Trigger>
<AlertDialog.Portal>
  <AlertDialog.Backdrop />
  <AlertDialog.Popup>
    <AlertDialog.Title>Confirm Delete</AlertDialog.Title>
    <AlertDialog.Description>
      Are you sure? This cannot be undone.
    </AlertDialog.Description>
    <AlertDialog.Footer>
      <AlertDialog.Cancel>
        <button>Cancel</button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <button>Delete</button>
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Popup>
</AlertDialog.Portal>
</AlertDialog>

Props#

AlertDialog (Root)#

Prop	Type	Default	Description
open	boolean	-	Controlled open state
defaultOpen	boolean	-	Initial open state (uncontrolled)
onOpenChange	(open: boolean) => void	-	Callback when open state changes

AlertDialog.Title#

Prop	Type	Default	Description
children	ReactNode	-	Title content (should be descriptive)

AlertDialog.Description#

Prop	Type	Default	Description
children	ReactNode	-	Description of the alert and its consequences

AlertDialog.Action / AlertDialog.Cancel#

Both components wrap AlertDialog.Close and will close the dialog when clicked.

Prop	Type	Default	Description
children	ReactNode	-	Button element to render

Accessibility#

Built on Base UI AlertDialog for robust accessibility
Uses role="alertdialog" with aria-modal="true"
Cannot be dismissed by clicking outside (requires explicit action)
Focus is trapped within the dialog
Focus returns to trigger when closed
Title and description are properly announced by screen readers
Supports Escape key to close (via Cancel action)