@fictjs/alert-dialog

Alert dialog primitives for Fict, modeled after @radix-ui/react-alert-dialog. A modal dialog that interrupts the user with important content and expects a response.

Part of ui-primitives, a port of Radix Primitives to Fict.

Installation

pnpm add @fictjs/alert-dialog fict

Usage

/** @jsxImportSource fict */
import * as AlertDialog from '@fictjs/alert-dialog'

export function Example() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger>Delete account</AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay />
        <AlertDialog.Content>
          <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
          <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
          <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
          <AlertDialog.Action>Yes, delete</AlertDialog.Action>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  )
}

Anatomy

• AlertDialog.Root (Root) — open / defaultOpen, onOpenChange.
• AlertDialog.Trigger (Trigger), AlertDialog.Portal (Portal), AlertDialog.Overlay (Overlay), AlertDialog.Content (Content).
• AlertDialog.Title (Title), AlertDialog.Description (Description) — labels the dialog for assistive technology.
• AlertDialog.Action (Action), AlertDialog.Cancel (Cancel) — focus is moved to Cancel by default.

Focus is trapped while open and returns to the trigger on close. Parts expose data-state ("open" / "closed") for animation.

Exports

• Components: AlertDialog (Root), AlertDialogTrigger (Trigger), AlertDialogPortal (Portal), AlertDialogOverlay (Overlay), AlertDialogContent (Content), AlertDialogAction (Action), AlertDialogCancel (Cancel), AlertDialogTitle (Title), AlertDialogDescription (Description), createAlertDialogScope.
• Types: AlertDialogProps, AlertDialogTriggerProps, AlertDialogPortalProps, AlertDialogOverlayProps, AlertDialogContentProps, AlertDialogActionProps, AlertDialogCancelProps, AlertDialogTitleProps, AlertDialogDescriptionProps.

Documentation

The API mirrors Radix, so the upstream Radix Alert Dialog docs apply. See the ui-primitives overview and the architecture guide for the Fict-specific reactivity model.

License

MIT © Fict contributors.