diff --git a/packages/react/src/components/QuilttButton.tsx b/packages/react/src/components/QuilttButton.tsx
index 812563a..f0d71cb 100644
--- a/packages/react/src/components/QuilttButton.tsx
+++ b/packages/react/src/components/QuilttButton.tsx
@@ -5,19 +5,26 @@ import type { ConnectorSDKCallbacks } from '@quiltt/core'
 import { useQuilttConnector } from '../hooks/useQuilttConnector'
 import type { AnyTag, PropsOf } from '../types'
 
+// Base button props without callback-specific properties
+type BaseQuilttButtonProps<T extends AnyTag> = {
+  as?: T
+  connectorId: string
+  connectionId?: string // For Reconnect Mode
+  institution?: string // For Connect Mode
+  // Override the native onClick handler
+  onClick?: (event: MouseEvent<HTMLElement>) => void
+}
+
+// Separate SDK callback types
+type QuilttCallbackProps = Omit<ConnectorSDKCallbacks, 'onLoad'> & {
+  // Separate the SDK onLoad from the HTML onLoad to avoid conflicts
+  onLoad?: ConnectorSDKCallbacks['onLoad'] // Handles SDK initialization
+  onHtmlLoad?: React.ReactEventHandler<HTMLElement> // Handles DOM element load
+}
+
+// Combined type for the full component
 type QuilttButtonProps<T extends AnyTag> = PropsWithChildren<
-  {
-    as?: T
-    connectorId: string
-    connectionId?: string // For Reconnect Mode
-    institution?: string // For Connect Mode
-    // Override the native onClick handler
-    onClick?: (event: MouseEvent<HTMLElement>) => void
-  } & Omit<ConnectorSDKCallbacks, 'onLoad'> & {
-      // Separate the SDK onLoad from the HTML onLoad
-      onLoad?: ConnectorSDKCallbacks['onLoad']
-      onHtmlLoad?: React.ReactEventHandler<HTMLElement>
-    }
+  BaseQuilttButtonProps<T> & QuilttCallbackProps
 >
 
 export const QuilttButton = <T extends AnyTag = 'button'>({
@@ -52,8 +59,12 @@ export const QuilttButton = <T extends AnyTag = 'button'>({
   const Button = as || 'button'
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
-    // Call the user's onClick handler if provided
-    onClick?.(event)
+    // Call the user's onClick handler first to allow for:
+    // 1. Pre-open validation
+    // 2. Preventing opening via event.preventDefault()
+    // 3. Setting up state before connector opens
+    if (onClick) onClick(event)
+
     // Then open the Quiltt connector
     open()
   }