@xylabs/react-button 4.1.3 → 4.2.1

package/dist/browser/components/ButtonExBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonExBase.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonExBase.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAExD,QAAA,MAAM,YAAY,yFAuBhB,CAAA;AAIF,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"ButtonExBase.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonExBase.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAEzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAExD,QAAA,MAAM,YAAY,yFAwDhB,CAAA;AAIF,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/browser/components/ButtonExProps.d.ts

@@ -2,6 +2,11 @@ import type { ButtonProps } from '@mui/material';
 import type { BoxlikeComponentProps, BusyProps } from '@xylabs/react-shared';
 import type { NavigateOptions, To } from 'react-router-dom';
 interface ButtonExProps extends Omit<ButtonProps, 'ref'>, BoxlikeComponentProps, BusyProps {
+    disableMixpanel?: boolean;
+    disableUserEvents?: boolean;
+    eventName?: string;
+    funnel?: string;
+    placement?: string;
     target?: string;
     to?: To;
     toOptions?: NavigateOptions;

package/dist/browser/components/ButtonExProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonExProps.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonExProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAE3D,UAAU,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,qBAAqB,EAAE,SAAS;IACxF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,eAAe,CAAA;CAC5B;AAED,YAAY,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"ButtonExProps.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonExProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAE3D,UAAU,aAAc,SAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,CAAC,EAAE,qBAAqB,EAAE,SAAS;IACxF,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,SAAS,CAAC,EAAE,eAAe,CAAA;CAC5B;AAED,YAAY,EAAE,aAAa,EAAE,CAAA"}

package/dist/browser/index.mjs

@@ -6,19 +6,56 @@ import React3, { forwardRef as forwardRef3 } from "react";
 
 // src/components/ButtonExBase.tsx
 import { Button, useTheme } from "@mui/material";
+import { useMixpanel } from "@xylabs/react-mixpanel";
+import { useUserEvents } from "@xylabs/react-pixel";
 import { BusyCircularProgress, BusyLinearProgress, mergeBoxlikeStyles } from "@xylabs/react-shared";
 import React, { forwardRef } from "react";
-var ButtonExBase = /* @__PURE__ */ forwardRef((props, ref) => {
+var ButtonExBase = /* @__PURE__ */ forwardRef(({ eventName = "Button Click", funnel, target, placement, disableUserEvents, href, disableMixpanel, ...props }, ref) => {
   const theme = useTheme();
+  const userEvents = useUserEvents();
+  const mixpanel = useMixpanel(false);
   const { busy, busyVariant = "linear", busyOpacity, onClick, children, ...rootProps } = mergeBoxlikeStyles(theme, props);
   const localOnClick = /* @__PURE__ */ __name((event) => {
-    if (!busy) {
-      onClick?.(event);
+    if (busy) {
+      event.preventDefault();
+    } else {
+      const callOnClickAndFollowHref = /* @__PURE__ */ __name(() => {
+        onClick?.(event);
+        if (href) {
+          if (target) {
+            window.open(href, target);
+          } else {
+            window.location.href = href;
+          }
+        }
+      }, "callOnClickAndFollowHref");
+      if (!disableMixpanel && mixpanel) {
+        mixpanel.track(eventName, {
+          funnel,
+          placement: placement ?? rootProps["aria-label"] ?? event.currentTarget.textContent
+        });
+      }
+      if (!disableUserEvents && userEvents) {
+        event.preventDefault();
+        userEvents.userClick({
+          elementName: eventName,
+          elementType: placement
+        }).then(() => {
+          callOnClickAndFollowHref();
+        }).catch((ex) => {
+          console.error("User event failed", eventName, ex);
+          callOnClickAndFollowHref();
+        });
+      } else {
+        callOnClickAndFollowHref();
+      }
     }
   }, "localOnClick");
   return /* @__PURE__ */ React.createElement(Button, {
     ref,
+    href,
     onClick: localOnClick,
+    target,
     ...rootProps
   }, busy && busyVariant === "linear" ? /* @__PURE__ */ React.createElement(BusyLinearProgress, {
     rounded: true,

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/ButtonEx.tsx","../../src/components/ButtonExBase.tsx","../../src/components/ButtonExTo.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\nimport { ButtonToEx } from './ButtonExTo.tsx'\n\nconst ButtonEx = forwardRef<HTMLButtonElement, ButtonExProps>(({ to, ...props }, ref) => {\n  return to ? <ButtonToEx to={to} ref={ref} {...props} /> : <ButtonExBase {...props} />\n})\n\nButtonEx.displayName = 'ButtonExXYLabs'\n\nexport { ButtonEx }\n","import { Button, useTheme } from '@mui/material'\nimport {\n  BusyCircularProgress, BusyLinearProgress, mergeBoxlikeStyles,\n} from '@xylabs/react-shared'\nimport type { MouseEvent } from 'react'\nimport React, { forwardRef } from 'react'\n\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonExBase = forwardRef<HTMLButtonElement, ButtonExProps>((props, ref) => {\n  const theme = useTheme()\n  const {\n    busy, busyVariant = 'linear', busyOpacity, onClick, children, ...rootProps\n  } = mergeBoxlikeStyles<ButtonExProps>(theme, props)\n\n  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!busy) {\n      onClick?.(event)\n    }\n  }\n\n  return (\n    <Button ref={ref} onClick={localOnClick} {...rootProps}>\n      {busy && busyVariant === 'linear'\n        ? <BusyLinearProgress rounded opacity={busyOpacity ?? 0} />\n        : null}\n      {busy && busyVariant === 'circular'\n        ? <BusyCircularProgress rounded size={24} opacity={busyOpacity ?? 0.5} />\n        : null}\n      {children}\n    </Button>\n  )\n})\n\nButtonExBase.displayName = 'ButtonExBaseXYLabs'\n\nexport { ButtonExBase }\n","import type { MouseEvent } from 'react'\nimport React, { forwardRef } from 'react'\nimport { useNavigate } from 'react-router-dom'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonToEx = forwardRef<HTMLButtonElement, ButtonExProps>(({\n  to, toOptions, onClick, ...props\n}, ref) => {\n  const navigate = useNavigate()\n  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event)\n    if (to) {\n      navigate(to, toOptions)\n    }\n  }\n\n  return <ButtonExBase ref={ref} onClick={localOnClick} {...props} />\n})\n\nButtonToEx.displayName = 'ButtonToExXYLabs'\n\nexport { ButtonToEx }\n"],"mappings":";;;;AAAA,OAAOA,UAASC,cAAAA,mBAAkB;;;ACAlC,SAASC,QAAQC,gBAAgB;AACjC,SACEC,sBAAsBC,oBAAoBC,0BACrC;AAEP,OAAOC,SAASC,kBAAkB;AAIlC,IAAMC,eAAeC,2BAA6C,CAACC,OAAOC,QAAAA;AACxE,QAAMC,QAAQC,SAAAA;AACd,QAAM,EACJC,MAAMC,cAAc,UAAUC,aAAaC,SAASC,UAAU,GAAGC,UAAAA,IAC/DC,mBAAkCR,OAAOF,KAAAA;AAE7C,QAAMW,eAAe,wBAACC,UAAAA;AACpB,QAAI,CAACR,MAAM;AACTG,gBAAUK,KAAAA;IACZ;EACF,GAJqB;AAMrB,SACE,sBAAA,cAACC,QAAAA;IAAOZ;IAAUM,SAASI;IAAe,GAAGF;KAC1CL,QAAQC,gBAAgB,WACrB,sBAAA,cAACS,oBAAAA;IAAmBC,SAAAA;IAAQC,SAASV,eAAe;OACpD,MACHF,QAAQC,gBAAgB,aACrB,sBAAA,cAACY,sBAAAA;IAAqBF,SAAAA;IAAQG,MAAM;IAAIF,SAASV,eAAe;OAChE,MACHE,QAAAA;AAGP,CAAA;AAEAV,aAAaqB,cAAc;;;ACjC3B,OAAOC,UAASC,cAAAA,mBAAkB;AAClC,SAASC,mBAAmB;AAK5B,IAAMC,aAAaC,gBAAAA,YAA6C,CAAC,EAC/DC,IAAIC,WAAWC,SAAS,GAAGC,MAAAA,GAC1BC,QAAAA;AACD,QAAMC,WAAWC,YAAAA;AACjB,QAAMC,eAAe,wBAACC,UAAAA;AACpBN,cAAUM,KAAAA;AACV,QAAIR,IAAI;AACNK,eAASL,IAAIC,SAAAA;IACf;EACF,GALqB;AAOrB,SAAO,gBAAAQ,OAAA,cAACC,cAAAA;IAAaN;IAAUF,SAASK;IAAe,GAAGJ;;AAC5D,CAAA;AAEAL,WAAWa,cAAc;;;AFfzB,IAAMC,WAAWC,gBAAAA,YAA6C,CAAC,EAAEC,IAAI,GAAGC,MAAAA,GAASC,QAAAA;AAC/E,SAAOF,KAAK,gBAAAG,OAAA,cAACC,YAAAA;IAAWJ;IAAQE;IAAW,GAAGD;OAAY,gBAAAE,OAAA,cAACE,cAAiBJ,KAAAA;AAC9E,CAAA;AAEAH,SAASQ,cAAc;","names":["React","forwardRef","Button","useTheme","BusyCircularProgress","BusyLinearProgress","mergeBoxlikeStyles","React","forwardRef","ButtonExBase","forwardRef","props","ref","theme","useTheme","busy","busyVariant","busyOpacity","onClick","children","rootProps","mergeBoxlikeStyles","localOnClick","event","Button","BusyLinearProgress","rounded","opacity","BusyCircularProgress","size","displayName","React","forwardRef","useNavigate","ButtonToEx","forwardRef","to","toOptions","onClick","props","ref","navigate","useNavigate","localOnClick","event","React","ButtonExBase","displayName","ButtonEx","forwardRef","to","props","ref","React","ButtonToEx","ButtonExBase","displayName"]}
+{"version":3,"sources":["../../src/components/ButtonEx.tsx","../../src/components/ButtonExBase.tsx","../../src/components/ButtonExTo.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\nimport { ButtonToEx } from './ButtonExTo.tsx'\n\nconst ButtonEx = forwardRef<HTMLButtonElement, ButtonExProps>(({ to, ...props }, ref) => {\n  return to ? <ButtonToEx to={to} ref={ref} {...props} /> : <ButtonExBase {...props} />\n})\n\nButtonEx.displayName = 'ButtonExXYLabs'\n\nexport { ButtonEx }\n","import { Button, useTheme } from '@mui/material'\nimport { useMixpanel } from '@xylabs/react-mixpanel'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport {\n  BusyCircularProgress, BusyLinearProgress, mergeBoxlikeStyles,\n} from '@xylabs/react-shared'\nimport type { MouseEvent } from 'react'\nimport React, { forwardRef } from 'react'\n\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonExBase = forwardRef<HTMLButtonElement, ButtonExProps>(({\n  eventName = 'Button Click', funnel, target, placement, disableUserEvents, href, disableMixpanel, ...props\n}, ref) => {\n  const theme = useTheme()\n  const userEvents = useUserEvents()\n  const mixpanel = useMixpanel(false)\n  const {\n    busy, busyVariant = 'linear', busyOpacity, onClick, children, ...rootProps\n  } = mergeBoxlikeStyles<ButtonExProps>(theme, props)\n\n  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (busy) {\n      // If it is busy, do not allow href clicks\n      event.preventDefault()\n    } else {\n      const callOnClickAndFollowHref = () => {\n        onClick?.(event)\n        if (href) {\n          if (target) {\n            window.open(href, target)\n          } else {\n            window.location.href = href\n          }\n        }\n      }\n      if (!disableMixpanel && mixpanel) {\n        mixpanel.track(eventName, {\n          funnel,\n          placement: placement ?? rootProps['aria-label'] ?? event.currentTarget.textContent,\n        })\n      }\n      if (!disableUserEvents && userEvents) {\n        event.preventDefault()\n        userEvents.userClick({ elementName: eventName, elementType: placement }).then(() => {\n          callOnClickAndFollowHref()\n        }).catch((ex) => {\n          console.error('User event failed', eventName, ex)\n          callOnClickAndFollowHref()\n        })\n      } else {\n        callOnClickAndFollowHref()\n      }\n    }\n  }\n\n  return (\n    <Button ref={ref} href={href} onClick={localOnClick} target={target} {...rootProps}>\n      {busy && busyVariant === 'linear'\n        ? <BusyLinearProgress rounded opacity={busyOpacity ?? 0} />\n        : null}\n      {busy && busyVariant === 'circular'\n        ? <BusyCircularProgress rounded size={24} opacity={busyOpacity ?? 0.5} />\n        : null}\n      {children}\n    </Button>\n  )\n})\n\nButtonExBase.displayName = 'ButtonExBaseXYLabs'\n\nexport { ButtonExBase }\n","import type { MouseEvent } from 'react'\nimport React, { forwardRef } from 'react'\nimport { useNavigate } from 'react-router-dom'\n\nimport { ButtonExBase } from './ButtonExBase.tsx'\nimport type { ButtonExProps } from './ButtonExProps.tsx'\n\nconst ButtonToEx = forwardRef<HTMLButtonElement, ButtonExProps>(({\n  to, toOptions, onClick, ...props\n}, ref) => {\n  const navigate = useNavigate()\n  const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event)\n    if (to) {\n      navigate(to, toOptions)\n    }\n  }\n\n  return <ButtonExBase ref={ref} onClick={localOnClick} {...props} />\n})\n\nButtonToEx.displayName = 'ButtonToExXYLabs'\n\nexport { ButtonToEx }\n"],"mappings":";;;;AAAA,OAAOA,UAASC,cAAAA,mBAAkB;;;ACAlC,SAASC,QAAQC,gBAAgB;AACjC,SAASC,mBAAmB;AAC5B,SAASC,qBAAqB;AAC9B,SACEC,sBAAsBC,oBAAoBC,0BACrC;AAEP,OAAOC,SAASC,kBAAkB;AAIlC,IAAMC,eAAeC,2BAA6C,CAAC,EACjEC,YAAY,gBAAgBC,QAAQC,QAAQC,WAAWC,mBAAmBC,MAAMC,iBAAiB,GAAGC,MAAAA,GACnGC,QAAAA;AACD,QAAMC,QAAQC,SAAAA;AACd,QAAMC,aAAaC,cAAAA;AACnB,QAAMC,WAAWC,YAAY,KAAA;AAC7B,QAAM,EACJC,MAAMC,cAAc,UAAUC,aAAaC,SAASC,UAAU,GAAGC,UAAAA,IAC/DC,mBAAkCZ,OAAOF,KAAAA;AAE7C,QAAMe,eAAe,wBAACC,UAAAA;AACpB,QAAIR,MAAM;AAERQ,YAAMC,eAAc;IACtB,OAAO;AACL,YAAMC,2BAA2B,6BAAA;AAC/BP,kBAAUK,KAAAA;AACV,YAAIlB,MAAM;AACR,cAAIH,QAAQ;AACVwB,mBAAOC,KAAKtB,MAAMH,MAAAA;UACpB,OAAO;AACLwB,mBAAOE,SAASvB,OAAOA;UACzB;QACF;MACF,GATiC;AAUjC,UAAI,CAACC,mBAAmBO,UAAU;AAChCA,iBAASgB,MAAM7B,WAAW;UACxBC;UACAE,WAAWA,aAAaiB,UAAU,YAAA,KAAiBG,MAAMO,cAAcC;QACzE,CAAA;MACF;AACA,UAAI,CAAC3B,qBAAqBO,YAAY;AACpCY,cAAMC,eAAc;AACpBb,mBAAWqB,UAAU;UAAEC,aAAajC;UAAWkC,aAAa/B;QAAU,CAAA,EAAGgC,KAAK,MAAA;AAC5EV,mCAAAA;QACF,CAAA,EAAGW,MAAM,CAACC,OAAAA;AACRC,kBAAQC,MAAM,qBAAqBvC,WAAWqC,EAAAA;AAC9CZ,mCAAAA;QACF,CAAA;MACF,OAAO;AACLA,iCAAAA;MACF;IACF;EACF,GAjCqB;AAmCrB,SACE,sBAAA,cAACe,QAAAA;IAAOhC;IAAUH;IAAYa,SAASI;IAAcpB;IAAiB,GAAGkB;KACtEL,QAAQC,gBAAgB,WACrB,sBAAA,cAACyB,oBAAAA;IAAmBC,SAAAA;IAAQC,SAAS1B,eAAe;OACpD,MACHF,QAAQC,gBAAgB,aACrB,sBAAA,cAAC4B,sBAAAA;IAAqBF,SAAAA;IAAQG,MAAM;IAAIF,SAAS1B,eAAe;OAChE,MACHE,QAAAA;AAGP,CAAA;AAEArB,aAAagD,cAAc;;;ACpE3B,OAAOC,UAASC,cAAAA,mBAAkB;AAClC,SAASC,mBAAmB;AAK5B,IAAMC,aAAaC,gBAAAA,YAA6C,CAAC,EAC/DC,IAAIC,WAAWC,SAAS,GAAGC,MAAAA,GAC1BC,QAAAA;AACD,QAAMC,WAAWC,YAAAA;AACjB,QAAMC,eAAe,wBAACC,UAAAA;AACpBN,cAAUM,KAAAA;AACV,QAAIR,IAAI;AACNK,eAASL,IAAIC,SAAAA;IACf;EACF,GALqB;AAOrB,SAAO,gBAAAQ,OAAA,cAACC,cAAAA;IAAaN;IAAUF,SAASK;IAAe,GAAGJ;;AAC5D,CAAA;AAEAL,WAAWa,cAAc;;;AFfzB,IAAMC,WAAWC,gBAAAA,YAA6C,CAAC,EAAEC,IAAI,GAAGC,MAAAA,GAASC,QAAAA;AAC/E,SAAOF,KAAK,gBAAAG,OAAA,cAACC,YAAAA;IAAWJ;IAAQE;IAAW,GAAGD;OAAY,gBAAAE,OAAA,cAACE,cAAiBJ,KAAAA;AAC9E,CAAA;AAEAH,SAASQ,cAAc;","names":["React","forwardRef","Button","useTheme","useMixpanel","useUserEvents","BusyCircularProgress","BusyLinearProgress","mergeBoxlikeStyles","React","forwardRef","ButtonExBase","forwardRef","eventName","funnel","target","placement","disableUserEvents","href","disableMixpanel","props","ref","theme","useTheme","userEvents","useUserEvents","mixpanel","useMixpanel","busy","busyVariant","busyOpacity","onClick","children","rootProps","mergeBoxlikeStyles","localOnClick","event","preventDefault","callOnClickAndFollowHref","window","open","location","track","currentTarget","textContent","userClick","elementName","elementType","then","catch","ex","console","error","Button","BusyLinearProgress","rounded","opacity","BusyCircularProgress","size","displayName","React","forwardRef","useNavigate","ButtonToEx","forwardRef","to","toOptions","onClick","props","ref","navigate","useNavigate","localOnClick","event","React","ButtonExBase","displayName","ButtonEx","forwardRef","to","props","ref","React","ButtonToEx","ButtonExBase","displayName"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xylabs/react-button",
-  "version": "4.1.3",
+  "version": "4.2.1",
   "description": "Common React library for all XY Labs projects that use React",
   "keywords": [
     "utility",
@@ -37,14 +37,16 @@
     "packages/*"
   ],
   "dependencies": {
-    "@xylabs/react-shared": "^4.1.3",
+    "@xylabs/react-mixpanel": "^4.2.1",
+    "@xylabs/react-pixel": "^4.2.1",
+    "@xylabs/react-shared": "^4.2.1",
     "react-router-dom": "^6.26.1"
   },
   "devDependencies": {
     "@mui/material": "^6.0.2",
     "@storybook/react": "^8.2.9",
     "@types/react": "^18.3.5",
-    "@xylabs/react-flexbox": "^4.1.3",
+    "@xylabs/react-flexbox": "^4.2.1",
     "@xylabs/ts-scripts-yarn3": "^4.0.7",
     "@xylabs/tsconfig-react": "^4.0.7",
     "react": "^18.3.1",

package/src/components/ButtonExBase.tsx

@@ -1,4 +1,6 @@
 import { Button, useTheme } from '@mui/material'
+import { useMixpanel } from '@xylabs/react-mixpanel'
+import { useUserEvents } from '@xylabs/react-pixel'
 import {
   BusyCircularProgress, BusyLinearProgress, mergeBoxlikeStyles,
 } from '@xylabs/react-shared'
@@ -7,20 +9,53 @@ import React, { forwardRef } from 'react'
 
 import type { ButtonExProps } from './ButtonExProps.tsx'
 
-const ButtonExBase = forwardRef<HTMLButtonElement, ButtonExProps>((props, ref) => {
+const ButtonExBase = forwardRef<HTMLButtonElement, ButtonExProps>(({
+  eventName = 'Button Click', funnel, target, placement, disableUserEvents, href, disableMixpanel, ...props
+}, ref) => {
   const theme = useTheme()
+  const userEvents = useUserEvents()
+  const mixpanel = useMixpanel(false)
   const {
     busy, busyVariant = 'linear', busyOpacity, onClick, children, ...rootProps
   } = mergeBoxlikeStyles<ButtonExProps>(theme, props)
 
   const localOnClick = (event: MouseEvent<HTMLButtonElement>) => {
-    if (!busy) {
-      onClick?.(event)
+    if (busy) {
+      // If it is busy, do not allow href clicks
+      event.preventDefault()
+    } else {
+      const callOnClickAndFollowHref = () => {
+        onClick?.(event)
+        if (href) {
+          if (target) {
+            window.open(href, target)
+          } else {
+            window.location.href = href
+          }
+        }
+      }
+      if (!disableMixpanel && mixpanel) {
+        mixpanel.track(eventName, {
+          funnel,
+          placement: placement ?? rootProps['aria-label'] ?? event.currentTarget.textContent,
+        })
+      }
+      if (!disableUserEvents && userEvents) {
+        event.preventDefault()
+        userEvents.userClick({ elementName: eventName, elementType: placement }).then(() => {
+          callOnClickAndFollowHref()
+        }).catch((ex) => {
+          console.error('User event failed', eventName, ex)
+          callOnClickAndFollowHref()
+        })
+      } else {
+        callOnClickAndFollowHref()
+      }
     }
   }
 
   return (
-    <Button ref={ref} onClick={localOnClick} {...rootProps}>
+    <Button ref={ref} href={href} onClick={localOnClick} target={target} {...rootProps}>
       {busy && busyVariant === 'linear'
         ? <BusyLinearProgress rounded opacity={busyOpacity ?? 0} />
         : null}

package/src/components/ButtonExProps.tsx

@@ -3,6 +3,11 @@ import type { BoxlikeComponentProps, BusyProps } from '@xylabs/react-shared'
 import type { NavigateOptions, To } from 'react-router-dom'
 
 interface ButtonExProps extends Omit<ButtonProps, 'ref'>, BoxlikeComponentProps, BusyProps {
+  disableMixpanel?: boolean
+  disableUserEvents?: boolean
+  eventName?: string
+  funnel?: string
+  placement?: string
   target?: string
   to?: To
   toOptions?: NavigateOptions