NextJs Starter Kit

Dialog Examples

Complete examples using useDialog hook and DialogCreator component directly

Hook-Based Examples (Recommended)

Using useDialog hook for automatic state management

Simple Confirmation

Delete Action (Destructive)

Edit with Form

Multiple Actions

Per-Button Loading (Mixed)

Middle button: auto-loading | Action button: external control

Direct Component Usage (DialogCreator)

Using DialogCreator component directly without hook

Simple Dialog

Lightweight, direct state management

Form Dialog

Direct component with form content

External Loading Control

Manage loading state from parent

Code Examples

Hook-Based Pattern (Recommended)

const dialog = useDialog({
  title: "Delete User",
  subtitle: "Are you sure?",
  size: "md",
  cancelButton: { label: "Cancel" },
  actionButton: {
    label: "Delete",
    variant: "destructive",
    onClick: async () => await deleteUser()
  }
});

// Usage
<button onClick={dialog.openDialog}>Delete</button>
{dialog.dialog}

Direct Component Pattern

const [isOpen, setIsOpen] = useState(false);

const config: DialogConfig = {
  title: "Delete User",
  size: "md",
  cancelButton: { label: "Cancel" },
  actionButton: {
    label: "Delete",
    onClick: async () => {
      await deleteUser();
      setIsOpen(false);
    }
  }
};

// Usage
<button onClick={() => setIsOpen(true)}>Delete</button>
<DialogCreator 
  isOpen={isOpen} 
  config={config} 
  onClose={() => setIsOpen(false)} 
/>

Per-Button Loading States

const [submitLoading, setSubmitLoading] = useState(false);

const dialog = useDialog({
  actionButton: {
    label: "Save",
    loading: submitLoading,  // External state
    onClick: async () => {
      setSubmitLoading(true);
      try {
        await save();
      } finally {
        setSubmitLoading(false);
      }
    }
  },
  middleButton: {
    label: "Draft",
    // No loading param = internal auto-loading
    onClick: async () => await saveDraft()
  }
});