@atlaskit/button 17.23.0 → 18.0.1

package/dist/es2019/new-button/variants/shared/use-button-base.js

@@ -9,6 +9,7 @@ import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
+import renderLoadingOverlay from './loading-overlay';
 const buttonStyles = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -281,6 +282,7 @@ const linkDecorationStyles = xcss({
   }
 });
 const disabledStyles = xcss({
+  cursor: 'not-allowed',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: `var(--ds-background-disabled, ${colors.N20A})`,
   // @ts-expect-error
@@ -436,12 +438,9 @@ const circleStyles = xcss({
 const fullWidthStyles = xcss({
   width: '100%'
 });
-const loadingOverlayStyles = xcss({
+const loadingStyles = xcss({
   cursor: 'progress'
 });
-const nonInteractiveStyles = xcss({
-  cursor: 'not-allowed'
-});
 const iconButtonStyles = xcss({
   height: `${32 / 14}em`,
   width: `${32 / 14}em`,
@@ -469,7 +468,7 @@ const navigationSplitButtonStyles = xcss({
   paddingInlineEnd: 'space.075',
   paddingInlineStart: 'space.075'
 });
-const overlayStyles = xcss({
+const loadingOverlayStyles = xcss({
   display: 'flex',
   position: 'absolute',
   alignItems: 'center',
@@ -516,10 +515,10 @@ const useButtonBase = ({
   onPointerDownCapture,
   onPointerUpCapture,
   onClickCapture,
-  overlay,
   ref,
   shouldFitContainer = false,
   spacing: propSpacing = 'default',
+  testId,
   ariaLabel,
   ariaLabelledBy
 }) => {
@@ -536,9 +535,9 @@ const useButtonBase = ({
   const appearance = getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
   const spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
   const isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
-  const hasOverlay = Boolean(overlay);
-  const isInteractive = !isDisabled && !isLoading && !hasOverlay;
-  const isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  const isInteractive = !isDisabled && !isLoading;
+  // Also treat loading buttons as disabled
+  const isEffectivelyDisabled = isDisabled || isLoading;
   const isSelected = propIsSelected && !isDisabled;
   useAutoFocus(localRef, autoFocus);
   return {
@@ -549,15 +548,20 @@ const useButtonBase = ({
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
-    // Consider overlay buttons to be effectively disabled
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
-    children: /*#__PURE__*/React.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {
+    children: /*#__PURE__*/React.createElement(Fragment, null, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
       as: "span",
-      xcss: overlayStyles
-    }, overlay) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+      xcss: loadingOverlayStyles
+    }, renderLoadingOverlay({
+      spacing,
+      appearance,
+      isDisabled,
+      isSelected,
+      testId
+    })) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
       id: loadingLabelId
-    }, ", Loading")),
+    }, LOADING_LABEL)),
     'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? `${ariaLabel} ${LOADING_LABEL}` : ariaLabel,
     'aria-labelledby': isLoading && ariaLabelledBy ? `${ariaLabelledBy} ${loadingLabelId}` : ariaLabelledBy,
     ...blockEvents(isEffectivelyDisabled, {

package/dist/es2019/old-button/shared/button-base.js

@@ -119,7 +119,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.23.0",
+    packageVersion: "18.0.1",
     analyticsData: analyticsContext
   });
 

package/dist/esm/new-button/variants/default/button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isLoading", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId", "type", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
   _excluded2 = ["className", "css", "as", "style"];
 import React from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -38,7 +38,6 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     testId = _ref.testId,
@@ -78,7 +77,6 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function But
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,

package/dist/esm/new-button/variants/default/link.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
+var _excluded = ["analyticsContext", "appearance", "aria-label", "aria-labelledby", "autoFocus", "children", "href", "iconAfter", "iconBefore", "interactionName", "isDisabled", "isSelected", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shouldFitContainer", "spacing", "testId", "UNSAFE_iconAfter_size", "UNSAFE_iconBefore_size"],
   _excluded2 = ["className", "css", "as", "style"];
 import React, { forwardRef, memo } from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -29,7 +29,6 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     testId = _ref.testId,
@@ -66,7 +65,6 @@ var LinkButtonBase = function LinkButtonBase(_ref, ref) {
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,

package/dist/esm/new-button/variants/default/use-default-button.js

@@ -1,7 +1,6 @@
 import React, { Fragment } from 'react';
 import Content from '../shared/content';
 import IconRenderer from '../shared/icon-renderer';
-import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
  * __Use default button base__
@@ -37,14 +36,12 @@ var useDefaultButton = function useDefaultButton(_ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     ref = _ref.ref,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     testId = _ref.testId,
     UNSAFE_iconAfter_size = _ref.UNSAFE_iconAfter_size,
     UNSAFE_iconBefore_size = _ref.UNSAFE_iconBefore_size;
-  var hasOverlay = Boolean(overlay || isLoading);
   var baseProps = useButtonBase({
     analyticsContext: analyticsContext,
     appearance: appearance,
@@ -55,16 +52,16 @@ var useDefaultButton = function useDefaultButton(_ref) {
     children: /*#__PURE__*/React.createElement(Fragment, null, iconBefore && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "before",
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, /*#__PURE__*/React.createElement(IconRenderer, {
       icon: iconBefore,
       size: UNSAFE_iconBefore_size
     })), children && /*#__PURE__*/React.createElement(Content, {
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, children), iconAfter && /*#__PURE__*/React.createElement(Content, {
       type: "icon",
       position: "after",
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, /*#__PURE__*/React.createElement(IconRenderer, {
       icon: iconAfter,
       size: UNSAFE_iconAfter_size
@@ -83,16 +80,10 @@ var useDefaultButton = function useDefaultButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: isLoading ? renderLoadingOverlay({
-      spacing: spacing,
-      appearance: appearance,
-      isDisabled: isDisabled,
-      isSelected: isSelected,
-      testId: testId
-    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
     spacing: spacing,
+    testId: testId,
     hasIconBefore: Boolean(iconBefore),
     hasIconAfter: Boolean(iconAfter)
   });

package/dist/esm/new-button/variants/icon/button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"],
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "icon", "interactionName", "isDisabled", "isLoading", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip", "type", "UNSAFE_size"],
   _excluded2 = ["className", "css", "as", "style"];
 import React from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -40,7 +40,6 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     shape = _ref.shape,
     spacing = _ref.spacing,
     testId = _ref.testId,
@@ -83,7 +82,6 @@ var IconButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shape: shape,
     spacing: spacing,

package/dist/esm/new-button/variants/icon/link.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "overlay", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"],
+var _excluded = ["aria-label", "aria-labelledby", "analyticsContext", "appearance", "autoFocus", "href", "icon", "interactionName", "isDisabled", "isSelected", "isTooltipDisabled", "label", "onClick", "onClickCapture", "onKeyDownCapture", "onKeyUpCapture", "onMouseDownCapture", "onMouseUpCapture", "onPointerDownCapture", "onPointerUpCapture", "onTouchEndCapture", "onTouchStartCapture", "shape", "spacing", "testId", "tooltip", "UNSAFE_size"],
   _excluded2 = ["className", "css", "as", "style"];
 import React, { forwardRef, memo } from 'react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -31,7 +31,6 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     shape = _ref.shape,
     spacing = _ref.spacing,
     testId = _ref.testId,
@@ -66,7 +65,6 @@ var LinkIconButtonBase = function LinkIconButtonBase(_ref, ref) {
     onPointerUpCapture: onPointerUpCapture,
     onTouchEndCapture: onTouchEndCapture,
     onTouchStartCapture: onTouchStartCapture,
-    overlay: overlay,
     ref: ref,
     shape: shape,
     spacing: spacing,

package/dist/esm/new-button/variants/icon/use-icon-button.js

@@ -2,7 +2,6 @@ import React from 'react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import Content from '../shared/content';
 import IconRenderer from '../shared/icon-renderer';
-import renderLoadingOverlay from '../shared/loading-overlay';
 import useButtonBase from '../shared/use-button-base';
 /**
  * __Use icon button__
@@ -23,7 +22,8 @@ var useIconButton = function useIconButton(_ref) {
     icon = _ref.icon,
     interactionName = _ref.interactionName,
     isDisabled = _ref.isDisabled,
-    isLoading = _ref.isLoading,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     isSelected = _ref.isSelected,
     label = _ref.label,
     onClick = _ref.onClick,
@@ -36,14 +36,12 @@ var useIconButton = function useIconButton(_ref) {
     onPointerUpCapture = _ref.onPointerUpCapture,
     onTouchEndCapture = _ref.onTouchEndCapture,
     onTouchStartCapture = _ref.onTouchStartCapture,
-    overlay = _ref.overlay,
     ref = _ref.ref,
     shape = _ref.shape,
     shouldFitContainer = _ref.shouldFitContainer,
     spacing = _ref.spacing,
     testId = _ref.testId,
     UNSAFE_size = _ref.UNSAFE_size;
-  var hasOverlay = Boolean(overlay || isLoading);
   var isCircle = shape === 'circle';
   var baseProps = useButtonBase({
     analyticsContext: analyticsContext,
@@ -54,7 +52,7 @@ var useIconButton = function useIconButton(_ref) {
     buttonType: buttonType,
     children: /*#__PURE__*/React.createElement(Content, {
       type: "icon",
-      hasOverlay: hasOverlay
+      isLoading: isLoading
     }, /*#__PURE__*/React.createElement(IconRenderer, {
       icon: icon,
       size: UNSAFE_size
@@ -75,16 +73,10 @@ var useIconButton = function useIconButton(_ref) {
     onPointerDownCapture: onPointerDownCapture,
     onPointerUpCapture: onPointerUpCapture,
     onClickCapture: onClickCapture,
-    overlay: isLoading ? renderLoadingOverlay({
-      spacing: spacing,
-      appearance: appearance,
-      isDisabled: isDisabled,
-      isSelected: isSelected,
-      testId: testId
-    }) : overlay,
     ref: ref,
     shouldFitContainer: shouldFitContainer,
-    spacing: spacing
+    spacing: spacing,
+    testId: testId
   });
   return baseProps;
 };

package/dist/esm/new-button/variants/shared/content.js

@@ -56,11 +56,11 @@ var Content = function Content(_ref) {
   var children = _ref.children,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'text' : _ref$type,
-    hasOverlay = _ref.hasOverlay,
+    isLoading = _ref.isLoading,
     position = _ref.position;
   return /*#__PURE__*/React.createElement(Box, {
     as: "span",
-    xcss: [commonStyles].concat(_toConsumableArray(type === 'text' ? [textStyles] : [iconStyles]), _toConsumableArray(hasOverlay ? [fadeStyles] : []), _toConsumableArray(position === 'before' ? [beforeIconStyles] : []), _toConsumableArray(position === 'after' ? [afterIconStyles] : []))
+    xcss: [commonStyles].concat(_toConsumableArray(type === 'text' ? [textStyles] : [iconStyles]), _toConsumableArray(isLoading ? [fadeStyles] : []), _toConsumableArray(position === 'before' ? [beforeIconStyles] : []), _toConsumableArray(position === 'after' ? [afterIconStyles] : []))
   }, children);
 };
 export default Content;

package/dist/esm/new-button/variants/shared/use-button-base.js

@@ -12,6 +12,7 @@ import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSplitButtonContext } from '../../containers/split-button/split-button-context';
 import blockEvents from './block-events';
 import { LOADING_LABEL } from './constants';
+import renderLoadingOverlay from './loading-overlay';
 var buttonStyles = xcss({
   display: 'inline-flex',
   boxSizing: 'border-box',
@@ -284,6 +285,7 @@ var linkDecorationStyles = xcss({
   }
 });
 var disabledStyles = xcss({
+  cursor: 'not-allowed',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   background: "var(--ds-background-disabled, ".concat(colors.N20A, ")"),
   // @ts-expect-error
@@ -439,12 +441,9 @@ var circleStyles = xcss({
 var fullWidthStyles = xcss({
   width: '100%'
 });
-var loadingOverlayStyles = xcss({
+var loadingStyles = xcss({
   cursor: 'progress'
 });
-var nonInteractiveStyles = xcss({
-  cursor: 'not-allowed'
-});
 var iconButtonStyles = xcss({
   height: "".concat(32 / 14, "em"),
   width: "".concat(32 / 14, "em"),
@@ -472,7 +471,7 @@ var navigationSplitButtonStyles = xcss({
   paddingInlineEnd: 'space.075',
   paddingInlineStart: 'space.075'
 });
-var overlayStyles = xcss({
+var loadingOverlayStyles = xcss({
   display: 'flex',
   position: 'absolute',
   alignItems: 'center',
@@ -526,12 +525,12 @@ var useButtonBase = function useButtonBase(_ref) {
     onPointerDownCapture = _ref.onPointerDownCapture,
     onPointerUpCapture = _ref.onPointerUpCapture,
     onClickCapture = _ref.onClickCapture,
-    overlay = _ref.overlay,
     ref = _ref.ref,
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$spacing = _ref.spacing,
     propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
+    testId = _ref.testId,
     ariaLabel = _ref.ariaLabel,
     ariaLabelledBy = _ref.ariaLabelledBy;
   var localRef = useRef(null);
@@ -547,9 +546,9 @@ var useButtonBase = function useButtonBase(_ref) {
   var appearance = getBooleanFF('platform.design-system-team.component-visual-refresh_t8zbo') && isDefaultAppearanceSplitButton ? 'subtle' : (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
   var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
   var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
-  var hasOverlay = Boolean(overlay);
-  var isInteractive = !isDisabled && !isLoading && !hasOverlay;
-  var isEffectivelyDisabled = isDisabled || Boolean(overlay);
+  var isInteractive = !isDisabled && !isLoading;
+  // Also treat loading buttons as disabled
+  var isEffectivelyDisabled = isDisabled || isLoading;
   var isSelected = propIsSelected && !isDisabled;
   useAutoFocus(localRef, autoFocus);
   return _objectSpread({
@@ -560,15 +559,20 @@ var useButtonBase = function useButtonBase(_ref) {
     // TODO: remove me once we kill color fallbacks
     isSelected && appearance === 'warning' && selectedWarningStyles,
     // TODO: remove me once we kill color fallbacks
-    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingOverlayStyles, (isDisabled || hasOverlay && !isLoading) && nonInteractiveStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
-    // Consider overlay buttons to be effectively disabled
+    isSelected && appearance === 'discovery' && selectedDiscoveryStyles, isDisabled && disabledStyles, isCircle && !isSplitButton && circleStyles, spacing === 'compact' && spacingCompactStyles, spacing === 'compact' && (getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') ? tokenizedSpacingCompactStyles : baseSpacingCompactStyles), spacing === 'none' && spacingNoneStyles, spacing === 'none' && getBooleanFF('platform.design-system-team.button-tokenised-typography-styles') && tokenizedSpacingNoneStyles, spacing !== 'none' && hasIconBefore && buttonIconBeforeStyles, spacing !== 'none' && hasIconAfter && buttonIconAfterStyles, isIconButton && iconButtonStyles, isIconButton && spacing === 'compact' && iconButtonCompactStyles, shouldFitContainer && fullWidthStyles, isLoading && loadingStyles, isSplitButton && splitButtonStyles, isNavigationSplitButton && navigationSplitButtonStyles],
     isDisabled: isEffectivelyDisabled,
-    children: /*#__PURE__*/React.createElement(Fragment, null, children, overlay ? /*#__PURE__*/React.createElement(Box, {
+    children: /*#__PURE__*/React.createElement(Fragment, null, children, isLoading ? /*#__PURE__*/React.createElement(Box, {
       as: "span",
-      xcss: overlayStyles
-    }, overlay) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
+      xcss: loadingOverlayStyles
+    }, renderLoadingOverlay({
+      spacing: spacing,
+      appearance: appearance,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      testId: testId
+    })) : null, isLoading && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
       id: loadingLabelId
-    }, ", Loading")),
+    }, LOADING_LABEL)),
     'aria-label': isLoading && ariaLabel && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(LOADING_LABEL) : ariaLabel,
     'aria-labelledby': isLoading && ariaLabelledBy ? "".concat(ariaLabelledBy, " ").concat(loadingLabelId) : ariaLabelledBy
   }, blockEvents(isEffectivelyDisabled, {

package/dist/esm/old-button/shared/button-base.js

@@ -125,7 +125,7 @@ export default /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "17.23.0",
+    packageVersion: "18.0.1",
     analyticsData: analyticsContext
   });
 

package/dist/types/new-button/variants/default/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
-declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *

package/dist/types/new-button/variants/default/use-default-button.d.ts

@@ -12,5 +12,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
  *
  * @private
  */
-declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
 export default useDefaultButton;

package/dist/types/new-button/variants/icon/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, UNSAFE_size, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

package/dist/types/new-button/variants/icon/use-icon-button.d.ts

@@ -12,5 +12,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shape, shouldFitContainer, spacing, testId, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shape, shouldFitContainer, spacing, testId, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types/new-button/variants/shared/content.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 type ContentProps = {
     children: React.ReactNode;
     type?: 'text' | 'icon';
-    hasOverlay: boolean;
+    isLoading: boolean;
     position?: 'before' | 'after';
 };
 /**
@@ -10,5 +10,5 @@ type ContentProps = {
  *
  * Used for slots within a Button, including icons and text content.
  */
-declare const Content: ({ children, type, hasOverlay, position }: ContentProps) => JSX.Element;
+declare const Content: ({ children, type, isLoading, position }: ContentProps) => JSX.Element;
 export default Content;

package/dist/types/new-button/variants/shared/use-button-base.d.ts

@@ -19,7 +19,7 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     isLoading?: boolean;
     ariaLabel?: string;
     ariaLabelledBy?: string;
-} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
+} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'testId'> & ControlledEvents<TagName>;
 type XCSS = ReturnType<typeof xcss>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
     xcss: XCSS | Array<XCSS | false | undefined>;
@@ -42,5 +42,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;

package/dist/types/new-button/variants/types.d.ts

@@ -16,12 +16,6 @@ export type CommonButtonProps<TagName extends HTMLElement> = {
      * Set the button to autofocus on mount.
      */
     autoFocus?: boolean;
-    /**
-     * @deprecated This is no longer supported and will be removed in a future major release. It only existed to support loading spinners, which can now be achieved with the `isLoading` prop.
-     *
-     * Used to 'overlay' something over a button. This is commonly used to display a loading spinner.
-     */
-    overlay?: React.ReactNode;
     /**
      * Disable the button to prevent user interaction.
      */

package/dist/types-ts4.5/new-button/variants/default/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type AdditionalDefaultLinkVariantProps, type CommonLinkVariantProps } from '../types';
 import { type CommonDefaultButtonProps } from './types';
 export type LinkButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonDefaultButtonProps & CommonLinkVariantProps<RouterLinkConfig> & AdditionalDefaultLinkVariantProps;
-declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ analyticsContext, appearance, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoFocus, children, href, iconAfter, iconBefore, interactionName, isDisabled, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, ...unsafeRest }: LinkButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Button__
  *

package/dist/types-ts4.5/new-button/variants/default/use-default-button.d.ts

@@ -12,5 +12,5 @@ type UseButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagName>
  *
  * @private
  */
-declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
+declare const useDefaultButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, children, iconAfter, iconBefore, interactionName, isDisabled, isLoading, isSelected, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shouldFitContainer, spacing, testId, UNSAFE_iconAfter_size, UNSAFE_iconBefore_size, }: UseDefaultButtonArgs<TagName>) => UseButtonReturn<TagName>;
 export default useDefaultButton;

package/dist/types-ts4.5/new-button/variants/icon/link.d.ts

@@ -2,7 +2,7 @@ import { type Ref } from 'react';
 import { type CommonLinkVariantProps } from '../types';
 import { type CommonIconButtonProps } from './types';
 export type LinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> = CommonIconButtonProps & CommonLinkVariantProps<RouterLinkConfig>;
-declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, shape, spacing, testId, tooltip, UNSAFE_size, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const LinkIconButtonBase: <RouterLinkConfig extends Record<string, any> = never>({ "aria-label": preventedAriaLabel, "aria-labelledby": ariaLabelledBy, analyticsContext, appearance, autoFocus, href, icon, interactionName, isDisabled, isSelected, isTooltipDisabled, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, shape, spacing, testId, tooltip, UNSAFE_size, ...unsafeRest }: LinkIconButtonProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __Link Icon Button__
  *

package/dist/types-ts4.5/new-button/variants/icon/use-icon-button.d.ts

@@ -12,5 +12,5 @@ type UseIconButtonReturn<TagName extends HTMLElement> = UseButtonBaseReturn<TagN
  *
  * @private
  */
-declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, overlay, ref, shape, shouldFitContainer, spacing, testId, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
+declare const useIconButton: <TagName extends HTMLElement>({ analyticsContext, appearance, ariaLabel, ariaLabelledBy, autoFocus, buttonType, icon, interactionName, isDisabled, isLoading, isSelected, label, onClick, onClickCapture, onKeyDownCapture, onKeyUpCapture, onMouseDownCapture, onMouseUpCapture, onPointerDownCapture, onPointerUpCapture, onTouchEndCapture, onTouchStartCapture, ref, shape, shouldFitContainer, spacing, testId, UNSAFE_size, }: UseIconButtonArgs<TagName>) => UseIconButtonReturn<TagName>;
 export default useIconButton;

package/dist/types-ts4.5/new-button/variants/shared/content.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 type ContentProps = {
     children: React.ReactNode;
     type?: 'text' | 'icon';
-    hasOverlay: boolean;
+    isLoading: boolean;
     position?: 'before' | 'after';
 };
 /**
@@ -10,5 +10,5 @@ type ContentProps = {
  *
  * Used for slots within a Button, including icons and text content.
  */
-declare const Content: ({ children, type, hasOverlay, position }: ContentProps) => JSX.Element;
+declare const Content: ({ children, type, isLoading, position }: ContentProps) => JSX.Element;
 export default Content;

package/dist/types-ts4.5/new-button/variants/shared/use-button-base.d.ts

@@ -19,7 +19,7 @@ export type UseButtonBaseArgs<TagName extends HTMLElement> = {
     isLoading?: boolean;
     ariaLabel?: string;
     ariaLabelledBy?: string;
-} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'overlay'> & ControlledEvents<TagName>;
+} & Pick<CommonButtonProps<TagName>, 'analyticsContext' | 'autoFocus' | 'interactionName' | 'isDisabled' | 'isSelected' | 'testId'> & ControlledEvents<TagName>;
 type XCSS = ReturnType<typeof xcss>;
 export type UseButtonBaseReturn<TagName extends HTMLElement> = {
     xcss: XCSS | Array<XCSS | false | undefined>;
@@ -42,5 +42,5 @@ export type UseButtonBaseReturn<TagName extends HTMLElement> = {
  *
  * @private
  */
-declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, overlay, ref, shouldFitContainer, spacing: propSpacing, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
+declare const useButtonBase: <TagName extends HTMLElement>({ appearance: propAppearance, autoFocus, isDisabled: propIsDisabled, isLoading, isSelected: propIsSelected, isIconButton, isCircle, hasIconBefore, hasIconAfter, children, onClick, onMouseDownCapture, onMouseUpCapture, onKeyDownCapture, onKeyUpCapture, onTouchStartCapture, onTouchEndCapture, onPointerDownCapture, onPointerUpCapture, onClickCapture, ref, shouldFitContainer, spacing: propSpacing, testId, ariaLabel, ariaLabelledBy, }: UseButtonBaseArgs<TagName>) => UseButtonBaseReturn<TagName>;
 export default useButtonBase;