@zohodesk/components 1.6.24 → 1.6.26

package/lib/v1/Button/Button.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.ButtonPresentational = void 0;
 
 var _cssUtility = require("@dot-system/css-utility");
 
@@ -17,24 +17,24 @@ var _Icon = _interopRequireDefault(require("@zohodesk/icons/es/Icon"));
 
 var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
 
-var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
-
 var _renderNode = _interopRequireWildcard(require("@zohodesk/utils/es/renderNode"));
 
-var _propTypes = _interopRequireDefault(require("./props/propTypes"));
-
-var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
-
 var _constants = require("@zohodesk/dotkit/es/utils/constants");
 
 var _constants2 = require("./constants");
 
-var _Loader = _interopRequireDefault(require("../shared/Loader/Loader"));
+var _Typography = _interopRequireDefault(require("../../Typography/Typography"));
+
+var _Spinner = _interopRequireDefault(require("../shared/Spinner/Spinner"));
 
 var _SuccessTick = _interopRequireDefault(require("../shared/SuccessTick/SuccessTick"));
 
 var _cssJSLogic = _interopRequireDefault(require("./css/cssJSLogic"));
 
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -53,17 +53,18 @@ var getTypographySize = function getTypographySize(size) {
   return _constants2.TYPOGRAPHY_SIZE_MAP[size] || '13';
 };
 
-var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
-  var palette = props.palette,
-      bgAppearance = props.bgAppearance,
-      borderAppearance = props.borderAppearance,
+var ButtonPresentational = /*#__PURE__*/(0, _react.forwardRef)(function ButtonPresentational(props, ref) {
+  var isLoading = props.isLoading,
+      isSuccess = props.isSuccess,
+      isDisabled = props.isDisabled,
+      isDisabledState = props.isDisabledState,
+      overlayActive = props.overlayActive,
       variant = props.variant,
-      status = props.status,
+      iconPlacement = props.iconPlacement,
       loaderPlacement = props.loaderPlacement,
       size = props.size,
       iconName = props.iconName,
       iconSize = props.iconSize,
-      iconPlacement = props.iconPlacement,
       renderIcon = props.renderIcon,
       renderBefore = props.renderBefore,
       renderAfter = props.renderAfter,
@@ -71,132 +72,111 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
       renderSuccess = props.renderSuccess,
       children = props.children,
       type = props.type,
-      onClick = props.onClick,
-      isDisabled = props.isDisabled,
-      isReadOnly = props.isReadOnly,
       isSelected = props.isSelected,
-      shape = props.shape,
-      paletteShade = props.paletteShade,
-      disabledAppearance = props.disabledAppearance,
       title = props.title,
       customProps = props.customProps,
       customAttributes = props.customAttributes,
       a11yAttributes = props.a11yAttributes,
       customId = props.customId,
-      testId = props.testId;
-  var isLoading = status === _constants2.STATUS.LOADING;
-  var isSuccess = status === _constants2.STATUS.SUCCESS;
-  var isDisabledState = isDisabled || isLoading;
-  var isInteractionDisabled = isDisabledState || isReadOnly;
-  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
-  var _customProps$text = customProps.text,
-      contentProps = _customProps$text === void 0 ? _constants.DUMMY_OBJECT : _customProps$text,
-      _customProps$icon = customProps.icon,
-      iconProps = _customProps$icon === void 0 ? _constants.DUMMY_OBJECT : _customProps$icon;
-  var iconTagAttributes = (0, _react.useMemo)(function () {
-    return _objectSpread(_objectSpread({}, iconProps.tagAttributes || _constants.DUMMY_OBJECT), {}, {
-      'data-test-id': testId ? "".concat(testId, "_icon") : undefined
-    });
-  }, [iconProps.tagAttributes, testId]);
-  var classes = (0, _react.useMemo)(function () {
-    return (0, _cssJSLogic["default"])({
-      props: props
-    });
-  }, [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
-  var loaderOverlayClass = classes.loaderOverlayClass,
-      successOverlayClass = classes.successOverlayClass,
-      contentWrapperClass = classes.contentWrapperClass,
-      textClassName = classes.textClassName,
-      buttonClassName = classes.buttonClassName,
-      iconClassName = classes.iconClassName;
-  var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
-
-  var _handleClick = function _handleClick(event) {
-    if (isInteractionDisabled) {
-      return;
-    }
-
-    onClick(event);
-  };
+      testId = props.testId,
+      dataSelectorId = props.dataSelectorId,
+      handleClick = props.handleClick,
+      classNames = props.classNames;
+  var loaderOverlayClass = classNames.loaderOverlayClass,
+      successOverlayClass = classNames.successOverlayClass,
+      contentWrapperClass = classNames.contentWrapperClass,
+      textClassName = classNames.textClassName,
+      buttonClassName = classNames.buttonClassName,
+      iconClassName = classNames.iconClassName,
+      loaderClassName = classNames.loaderClassName,
+      successClassName = classNames.successClassName;
+
+  var _ref = customProps || _constants.DUMMY_OBJECT,
+      _ref$text = _ref.text,
+      contentProps = _ref$text === void 0 ? _constants.DUMMY_OBJECT : _ref$text,
+      _ref$icon = _ref.icon,
+      iconProps = _ref$icon === void 0 ? _constants.DUMMY_OBJECT : _ref$icon;
+
+  var _ref2 = customAttributes || _constants.DUMMY_OBJECT,
+      _ref2$button = _ref2.button,
+      buttonAttributes = _ref2$button === void 0 ? _constants.DUMMY_OBJECT : _ref2$button,
+      _ref2$contentWrapper = _ref2.contentWrapper,
+      contentWrapperAttributes = _ref2$contentWrapper === void 0 ? _constants.DUMMY_OBJECT : _ref2$contentWrapper,
+      _ref2$loader = _ref2.loader,
+      loaderAttributes = _ref2$loader === void 0 ? _constants.DUMMY_OBJECT : _ref2$loader,
+      _ref2$success = _ref2.success,
+      successAttributes = _ref2$success === void 0 ? _constants.DUMMY_OBJECT : _ref2$success,
+      _ref2$icon = _ref2.icon,
+      iconAttributes = _ref2$icon === void 0 ? _constants.DUMMY_OBJECT : _ref2$icon,
+      _ref2$text = _ref2.text,
+      textAttributes = _ref2$text === void 0 ? _constants.DUMMY_OBJECT : _ref2$text;
+
+  var iconTagAttributes = _objectSpread(_objectSpread({}, iconAttributes), testId && {
+    'data-test-id': "".concat(testId, "_icon")
+  });
 
   var _renderLoader = function _renderLoader() {
-    if (!isLoading) {
-      return null;
-    }
-
-    if ((0, _renderNode.isRenderable)(renderLoader)) {
-      return (0, _renderNode["default"])(renderLoader, {
-        status: status
-      });
-    }
-
-    var loaderClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
+    if (!isLoading) return null;
+    var isOverlay = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+    var hasCustomLoader = (0, _renderNode.isRenderable)(renderLoader);
+    if (hasCustomLoader && !isOverlay) return (0, _renderNode["default"])(renderLoader, {
+      status: _constants2.STATUS.LOADING
+    });
     return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: loaderClassName,
-      testId: testId ? "".concat(testId, "_loader") : undefined
-    }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null));
+      $ui_className: isOverlay ? loaderOverlayClass : '',
+      testId: testId ? "".concat(testId, "_loader") : undefined,
+      customId: customId ? "".concat(customId, "_loader") : undefined,
+      $tagAttributes_container: hasCustomLoader ? undefined : loaderAttributes
+    }, hasCustomLoader ? (0, _renderNode["default"])(renderLoader, {
+      status: _constants2.STATUS.LOADING
+    }) : /*#__PURE__*/_react["default"].createElement(_Spinner["default"], {
+      customClass: loaderClassName
+    }));
   };
 
   var _renderSuccess = function _renderSuccess() {
-    if (!isSuccess) {
-      return null;
-    }
-
-    if ((0, _renderNode.isRenderable)(renderSuccess)) {
-      return (0, _renderNode["default"])(renderSuccess, {
-        status: status
-      });
-    }
-
-    var successClassName = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
+    if (!isSuccess) return null;
+    var isOverlay = loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+    var hasCustomSuccess = (0, _renderNode.isRenderable)(renderSuccess);
+    if (hasCustomSuccess && !isOverlay) return (0, _renderNode["default"])(renderSuccess, {
+      status: _constants2.STATUS.SUCCESS
+    });
     return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
       $ui_displayMode: "flex",
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: successClassName,
-      testId: testId ? "".concat(testId, "_success") : undefined
-    }, /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], null));
+      $ui_className: isOverlay ? successOverlayClass : '',
+      testId: testId ? "".concat(testId, "_success") : undefined,
+      customId: customId ? "".concat(customId, "_success") : undefined,
+      $tagAttributes_container: hasCustomSuccess ? undefined : successAttributes
+    }, hasCustomSuccess ? (0, _renderNode["default"])(renderSuccess, {
+      status: _constants2.STATUS.SUCCESS
+    }) : /*#__PURE__*/_react["default"].createElement(_SuccessTick["default"], {
+      customClass: successClassName
+    }));
   };
 
   var _renderIconNode = function _renderIconNode() {
-    if (!showIcon) {
-      return null;
-    }
-
-    if ((0, _renderNode.isRenderable)(renderIcon)) {
-      return (0, _renderNode["default"])(renderIcon);
-    }
-
+    var showIcon = variant !== _constants2.VARIANT.TEXT && (renderIcon || iconName);
+    if (!showIcon) return null;
+    if ((0, _renderNode.isRenderable)(renderIcon)) return (0, _renderNode["default"])(renderIcon, {
+      iconName: iconName,
+      iconSize: iconSize
+    });
     return /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
       iconClass: iconClassName,
       name: iconName,
       size: iconSize,
       tagAttributes: iconTagAttributes,
-      dataId: testId ? "".concat(testId, "_icon") : undefined
+      dataId: customId ? "".concat(customId, "_icon") : undefined
     }));
   };
 
-  var _renderBeforeNode = function _renderBeforeNode() {
-    if (!(0, _renderNode.isRenderable)(renderBefore)) {
-      return null;
-    }
-
-    return (0, _renderNode["default"])(renderBefore, props);
-  };
-
-  var _renderAfterNode = function _renderAfterNode() {
-    if (!(0, _renderNode.isRenderable)(renderAfter)) {
-      return null;
-    }
-
-    return (0, _renderNode["default"])(renderAfter, props);
-  };
-
   var _renderContent = function _renderContent() {
-    var shouldShowText = variant !== _constants2.VARIANT.ICON && children !== undefined && children !== null;
+    var shouldShowText = variant !== _constants2.VARIANT.ICON && children != null && (typeof children !== 'string' || children.trim() !== '');
     var showLoaderStart = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
     var showLoaderAfter = isLoading && loaderPlacement === _constants2.LOADER_PLACEMENT.END;
     var showSuccessStart = isSuccess && loaderPlacement === _constants2.LOADER_PLACEMENT.START;
@@ -207,31 +187,135 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
       $flag_shrink: true,
       $ui_alignItems: "center",
       $ui_justifyContent: "center",
-      $ui_className: contentWrapperClass
-    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, _renderBeforeNode(), iconPlacement === _constants2.ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({}, contentProps, {
-      $ui_className: textClassName,
-      $ui_size: getTypographySize(size),
-      $flag_dotted: variant !== _constants2.VARIANT.ICON
-    }), children) : null, iconPlacement === _constants2.ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, _renderAfterNode(), showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
+      $ui_className: contentWrapperClass,
+      $tagAttributes_container: contentWrapperAttributes
+    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, (0, _renderNode.isRenderable)(renderBefore) ? (0, _renderNode["default"])(renderBefore, props) : null, iconPlacement === _constants2.ICON_PLACEMENT.START ? _renderIconNode() : null, shouldShowText ? typeof children === 'string' ? /*#__PURE__*/_react["default"].createElement(_Typography["default"], _extends({
+      size: getTypographySize(size)
+    }, contentProps, {
+      tagAttributes: textAttributes,
+      customClass: textClassName,
+      isDotted: true
+    }), children) : children : null, iconPlacement === _constants2.ICON_PLACEMENT.END ? _renderIconNode() : null, (0, _renderNode.isRenderable)(renderAfter) ? (0, _renderNode["default"])(renderAfter, props) : null, showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
   };
 
-  var containerAttributes = _objectSpread(_objectSpread({}, customAttributes), {}, {
-    'data-id': customId,
-    'data-test-id': testId,
+  var containerAttributes = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, buttonAttributes), customId && {
+    'data-id': isDisabled ? "".concat(customId, "_disabled") : customId
+  }), testId && {
+    'data-test-id': isDisabled ? "".concat(testId, "_disabled") : testId
+  }), dataSelectorId && {
+    'data-selector-id': dataSelectorId
+  }), title && {
     'data-title': title
   });
 
-  return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, a11yAttributes, {
+  return /*#__PURE__*/_react["default"].createElement("button", _extends({}, containerAttributes, {
+    "aria-busy": isLoading,
+    "aria-disabled": isDisabledState,
+    "aria-pressed": isSelected
+  }, a11yAttributes, {
     ref: ref,
     type: type,
     className: (0, _cssUtility.cn)(buttonClassName),
-    "aria-busy": isLoading,
-    "aria-disabled": isDisabledState,
-    "aria-readonly": isReadOnly,
-    "aria-pressed": isSelected,
-    onClick: _handleClick
+    onClick: handleClick
   }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
 });
+exports.ButtonPresentational = ButtonPresentational;
+ButtonPresentational.displayName = 'ButtonPresentational';
+var Button = /*#__PURE__*/(0, _react.forwardRef)(function Button(props, ref) {
+  var palette = props.palette,
+      appearance = props.appearance,
+      hoverAppearance = props.hoverAppearance,
+      selectedAppearance = props.selectedAppearance,
+      variant = props.variant,
+      status = props.status,
+      loaderPlacement = props.loaderPlacement,
+      size = props.size,
+      iconName = props.iconName,
+      iconSize = props.iconSize,
+      iconPlacement = props.iconPlacement,
+      renderIcon = props.renderIcon,
+      renderBefore = props.renderBefore,
+      renderAfter = props.renderAfter,
+      renderLoader = props.renderLoader,
+      renderSuccess = props.renderSuccess,
+      children = props.children,
+      type = props.type,
+      onClick = props.onClick,
+      isDisabled = props.isDisabled,
+      isSelected = props.isSelected,
+      shape = props.shape,
+      disabledAppearance = props.disabledAppearance,
+      title = props.title,
+      customProps = props.customProps,
+      customAttributes = props.customAttributes,
+      a11yAttributes = props.a11yAttributes,
+      customId = props.customId,
+      testId = props.testId,
+      dataSelectorId = props.dataSelectorId,
+      customClass = props.customClass;
+  var isLoading = status === _constants2.STATUS.LOADING;
+  var isSuccess = status === _constants2.STATUS.SUCCESS;
+  var isDisabledState = isDisabled || isLoading;
+  var overlayActive = (isLoading || isSuccess) && loaderPlacement === _constants2.LOADER_PLACEMENT.OVERLAY;
+  var classNames = (0, _react.useMemo)(function () {
+    return (0, _cssJSLogic["default"])({
+      props: {
+        palette: palette,
+        appearance: appearance,
+        hoverAppearance: hoverAppearance,
+        selectedAppearance: selectedAppearance,
+        size: size,
+        variant: variant,
+        status: status,
+        isDisabled: isDisabled,
+        isSelected: isSelected,
+        shape: shape,
+        loaderPlacement: loaderPlacement,
+        disabledAppearance: disabledAppearance,
+        customClass: customClass
+      }
+    });
+  }, [palette, appearance, hoverAppearance, selectedAppearance, size, variant, status, isDisabled, isSelected, shape, loaderPlacement, disabledAppearance, customClass]);
+
+  var handleClick = function handleClick(event) {
+    if (isDisabledState) return;
+    onClick(event);
+  };
+
+  var essentials = {
+    isLoading: isLoading,
+    isSuccess: isSuccess,
+    isDisabled: isDisabled,
+    isDisabledState: isDisabledState,
+    overlayActive: overlayActive,
+    variant: variant,
+    iconPlacement: iconPlacement,
+    loaderPlacement: loaderPlacement,
+    size: size,
+    iconName: iconName,
+    iconSize: iconSize,
+    renderIcon: renderIcon,
+    renderBefore: renderBefore,
+    renderAfter: renderAfter,
+    renderLoader: renderLoader,
+    renderSuccess: renderSuccess,
+    children: children,
+    type: type,
+    isSelected: isSelected,
+    title: title,
+    customProps: customProps,
+    customAttributes: customAttributes,
+    a11yAttributes: a11yAttributes,
+    customId: customId,
+    testId: testId,
+    dataSelectorId: dataSelectorId,
+    handleClick: handleClick
+  };
+  return /*#__PURE__*/_react["default"].createElement(ButtonPresentational, _extends({}, essentials, {
+    classNames: classNames,
+    ref: ref
+  }));
+});
 Button.propTypes = _propTypes["default"];
 Button.defaultProps = _defaultProps["default"];
 Button.displayName = 'Button';

package/lib/v1/Button/README.md

@@ -18,93 +18,159 @@ import Button from '@zohodesk/components/es/v1/Button/Button';
 </Button>
 ```
 
-### With Palette Variants
+### With Palette
 
 ```jsx
-<Button palette="primary">Save</Button>
+<Button palette="brand">Save</Button>
 <Button palette="danger">Delete</Button>
 <Button palette="success">Confirm</Button>
 ```
 
+### With Appearance
+
+`appearance`, `hoverAppearance`, and `selectedAppearance` are objects with optional `bg`, `border`, and `text` keys. Each key accepts `true` (use palette color), `false` (suppress), or a palette name string.
+
+```jsx
+<Button palette="brand" appearance={{ bg: false, border: true }}>
+  Ghost
+</Button>
+
+<Button
+  palette="brand"
+  appearance={{ bg: false, border: true }}
+  hoverAppearance={{ bg: false, border: true }}
+  selectedAppearance={{ bg: false, border: true }}
+>
+  Ghost with states
+</Button>
+```
+
+### Using Presets
+
+```jsx
+import {
+  BRAND_GHOST,
+  BRAND_TEXT_ONLY,
+  SECONDARY_GHOST_BRAND_TINTED_ONSELECT,
+  SECONDARY_GHOST_CANCEL,
+  BRAND_TINTED_OUTLINE,
+  BRAND_TEXT_TINTED_HOVER
+} from '@zohodesk/components/es/v1/Button/constants/presets';
+
+<Button {...BRAND_GHOST}>Brand Ghost</Button>
+<Button {...BRAND_TEXT_ONLY}>Brand Text Only</Button>
+<Button {...SECONDARY_GHOST_BRAND_TINTED_ONSELECT}>Secondary Ghost</Button>
+```
+
 ### With Icon
 
 ```jsx
 <Button variant="icon" iconName="ZD-plus" iconSize={20} />
 
-<Button variant="iconWithText" iconName="ZD-plus" iconPlacement="left">
+<Button variant="iconWithText" iconName="ZD-plus" iconPlacement="start">
   Add Item
 </Button>
 ```
 
-### Loading State
+### Loading / Success State
 
 ```jsx
-<Button status="loading" loaderPlacement="overlay">
-  Saving...
-</Button>
-
-<Button status="loading" loaderPlacement="start">
-  Loading
-</Button>
+<Button status="loading" loaderPlacement="overlay">Saving...</Button>
+<Button status="loading" loaderPlacement="start">Loading</Button>
+<Button status="success">Done</Button>
 ```
 
-### Disabled / Read Only
+### Disabled
 
 ```jsx
 <Button isDisabled>Disabled</Button>
-<Button isReadOnly>Read Only</Button>
+<Button isDisabled disabledAppearance="strike">Disabled Strike</Button>
+```
+
+### Shape
+
+```jsx
+<Button shape="pill">Pill</Button>
+<Button shape="rectangle">Rectangle</Button>
+<Button shape="roundedRectangle">Rounded</Button>
 ```
 
 ## Props
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `customId` | `string` | — | `data-id` attribute for automation |
-| `testId` | `string` | — | `data-test-id` attribute for testing |
-| `palette` | `oneOf: default, primary, secondary, danger, success` | `default` | Color palette |
-| `bgAppearance` | `oneOf: filled, onHover, none` | `filled` | Background behavior |
-| `borderAppearance` | `oneOf: default, onHover, none` | `default` | Border behavior |
+| `palette` | `oneOf: brand, brandLighter, info, infoLighter, secondary, secondaryLighter, danger, dangerLighter, success, successLighter, warning, warningLighter` | `''` | Color palette |
+| `appearance` | `{ bg?, border?, text? }` | `{ bg: true, text: true }` | Color treatments at rest. Values: `true`, `false`, or a palette name |
+| `hoverAppearance` | `{ bg?, border?, text? }` | `{ bg: true, text: true }` | Color treatments on hover/focus/active |
+| `selectedAppearance` | `{ bg?, border?, text? }` | `{ bg: true, text: true }` | Color treatments when `isSelected` is true |
 | `variant` | `oneOf: text, icon, iconWithText` | `text` | Display variant |
 | `size` | `oneOf: small, medium, large, full` | `medium` | Size variant |
 | `status` | `oneOf: default, loading, success` | `default` | Status state |
-| `loaderPlacement` | `oneOf: start, end, overlay` | `overlay` | Where loader appears |
+| `loaderPlacement` | `oneOf: start, end, overlay` | `overlay` | Where the loader appears |
+| `shape` | `oneOf: pill, rectangle, roundedRectangle` | `roundedRectangle` | Border shape |
 | `iconName` | `string` | — | Icon name from `@zohodesk/icons` |
 | `iconSize` | `number` | `16` | Icon size in pixels |
-| `iconPlacement` | `oneOf: left, right` | `left` | Icon position relative to text |
-| `paletteShade` | `oneOf: default, lighter` | `default` | Shade variant |
-| `disabledAppearance` | `oneOf: none, dull, strike` | `dull` | Disabled visual style |
+| `iconPlacement` | `oneOf: start, end` | `start` | Icon position relative to text |
+| `disabledAppearance` | `oneOf: none, dull, strike` | `dull` | Visual style when disabled |
+| `isDisabled` | `bool` | `false` | Disables the button |
+| `isSelected` | `bool` | `false` | Selected/pressed state (`aria-pressed`) |
+| `type` | `oneOf: button, submit, reset` | `button` | HTML button type |
+| `onClick` | `func` | — | Click handler (suppressed when disabled or loading) |
+| `title` | `string` | — | Tooltip / `data-title` attribute |
+| `children` | `node` | — | Button label content |
 | `renderIcon` | `node \| func` | — | Custom icon render slot |
 | `renderBefore` | `node \| func` | — | Slot before main content |
 | `renderAfter` | `node \| func` | — | Slot after main content |
 | `renderLoader` | `node \| func` | — | Custom loader render slot |
 | `renderSuccess` | `node \| func` | — | Custom success render slot |
-| `children` | `node` | — | Button text content |
-| `type` | `oneOf: button, submit, reset` | `button` | HTML button type |
-| `onClick` | `func` | — | Click event handler |
-| `isDisabled` | `bool` | `false` | Disables the button |
-| `isReadOnly` | `bool` | `false` | Read-only state |
-| `isSelected` | `bool` | `false` | Selected/pressed state |
-| `isRounded` | `bool` | `false` | Rounded border radius |
-| `title` | `string` | — | Title/tooltip text |
+| `customId` | `string` | — | `data-id` attribute |
+| `testId` | `string` | — | `data-test-id` attribute |
+| `dataSelectorId` | `string` | — | `data-selector-id` attribute |
+| `a11yAttributes` | `object` | `{}` | Extra ARIA/accessibility attributes spread onto `<button>` |
+| `customClass` | `{ wrapper?, text?, icon?, loader?, success? }` | `{}` | CSS class overrides per part |
+| `customProps` | `{ text?, icon? }` | `{}` | Extra props forwarded to text/icon sub-elements |
+| `customAttributes` | `{ button?, contentWrapper?, loader?, success?, icon?, text? }` | `{}` | Extra HTML attributes per internal element |
+
+## Presets
+
+Ready-made palette + appearance combinations exported from `constants/presets`:
+
+| Name | Palette | Appearance | Description |
+|---|---|---|---|
+| `BRAND_GHOST` | `brand` | `{ bg: false, border: true }` | Transparent bg, brand border |
+| `BRAND_TEXT_ONLY` | `brand` | `{ bg: false }` | Text only, no border |
+| `BRAND_TINTED_OUTLINE` | `brandLighter` | `{ border: true }` | Tinted fill, brand border |
+| `SUCCESS_GHOST` | `success` | `{ bg: false, border: true }` | Transparent bg, success border |
+| `SUCCESS_TEXT_ONLY` | `success` | `{ bg: false }` | Text only, no border |
+| `SUCCESS_TINTED_OUTLINE` | `successLighter` | `{ border: true }` | Tinted fill, success border |
+| `SECONDARY_GHOST_BRAND_TINTED_ONSELECT` | `secondary` | `{ bg: false, border: true }` | Secondary ghost; selected state switches to brand tint |
+| `SECONDARY_GHOST_CANCEL` | `secondary` | `{ bg: false, border: true }` | Secondary ghost without a selected state; cancel / dismiss buttons |
+| `BLACK_TEXT_BRAND_ONHOVER` | `brand` | `{ bg: false, text: 'black' }` | Black text, brand color on hover |
+| `BRAND_BG_ONSELECT` | `brand` | `{ bg: false, border: true }` | Ghost without a defined selected state |
+| `BRAND_TEXT_TINTED_HOVER` | `brandLighter` | `{ bg: false }` | Ghost that becomes tinted on hover |
+| `BRAND_TEXT_TINTED_DANGER_HOVER` | `brandLighter` | `{ bg: false }` | Ghost that becomes danger-tinted on hover |
 
 ## Customization
 
 ### Parts
 
-| Part | Element | Description |
+| Part key | Element | Description |
 |---|---|---|
-| `wrapper` | `<button>` root | The outermost button element |
-| `text` | Typography | The text label |
-
-### CSS Custom Properties
+| `button` | `<button>` | Outermost button element |
+| `contentWrapper` | Inner `<Flex>` | Wraps icon + text content |
+| `text` | `<Typography>` | Text label |
+| `icon` | `<Icon>` | Icon element |
+| `loader` | `<Flex>` | Loader wrapper |
+| `success` | `<Flex>` | Success tick wrapper |
 
-The `.varClass` block in `Button.module.css` defines local custom properties that size variants override:
+Pass class overrides via `customClass`, extra props via `customProps`, or arbitrary HTML attributes via `customAttributes`.
 
-| Property | Default | Description |
-|---|---|---|
-| `--local-Button-radius` | `4px` | Border radius |
-| `--local-Button-gap` | `8px` | Content gap |
-| `--local-Button-padding-block` | `6px` | Block padding |
-| `--local-Button-padding-inline` | `15px` | Inline padding |
-| `--local-Button-min-width` | `90px` | Minimum width |
-| `--local-Button-spinner-size` | `16px` | Spinner/tick size |
+```jsx
+<Button
+  customClass={{ wrapper: 'myBtn', text: 'myBtnText' }}
+  customAttributes={{ button: { 'data-analytics': 'save' } }}
+  a11yAttributes={{ 'aria-label': 'Save document' }}
+>
+  Save
+</Button>
+```