diff --git a/src/index.tsx b/src/index.tsx
index 4260166..61de247 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -422,8 +422,8 @@ const Toast = (props: ToastProps) => {
                 // We need to check twice because typescript
                 if (!isAction(toast.cancel)) return;
                 if (!dismissible) return;
+                toast.cancel.onClick?.(event);
                 deleteToast();
-                toast.cancel.onClick(event);
               }}
               className={cn(classNames?.cancelButton, toast?.classNames?.cancelButton)}
             >
@@ -434,13 +434,14 @@ const Toast = (props: ToastProps) => {
             toast.action
           ) : toast.action && isAction(toast.action) ? (
             <button
-              data-button=""
+              data-button
+							data-action
               style={toast.actionButtonStyle || actionButtonStyle}
               onClick={(event) => {
                 // We need to check twice because typescript
                 if (!isAction(toast.action)) return;
-                toast.action.onClick(event);
                 if (event.defaultPrevented) return;
+                toast.action.onClick?.(event);
                 deleteToast();
               }}
               className={cn(classNames?.actionButton, toast?.classNames?.actionButton)}
diff --git a/src/types.ts b/src/types.ts
index d20f644..e26aaca 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -41,7 +41,7 @@ export interface ToastIcons {
 }
 
 interface Action {
-  label: string;
+  label: React.ReactNode;
   onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   actionButtonStyle?: React.CSSProperties;
 }
@@ -75,7 +75,7 @@ export interface ToastT {
 }
 
 export function isAction(action: Action | React.ReactNode): action is Action {
-  return (action as Action).label !== undefined && typeof (action as Action).onClick === 'function';
+  return (action as Action).label !== undefined;
 }
 
 export type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';