@zohodesk/components 1.6.7 → 1.6.11-exp-6

package/es/Typography/css/Typography.module.css

@@ -177,6 +177,10 @@
   white-space: pre-wrap
 }
 
+.whiteSpace_breakSpaces {
+  white-space: break-spaces;
+}
+
 
 
 /*...............Font Size Start.........*/

package/es/Typography/css/cssJSLogic.js

@@ -7,48 +7,80 @@ export default function cssJSLogic(_ref) {
   } = _ref;
   let {
     $flag_reset,
+    shouldReset,
     $flag_dotted,
+    isDotted,
     $ui_size,
+    size,
     $ui_lineClamp,
+    lineClamp,
     $ui_lineHeight,
+    lineHeight,
     $ui_display,
+    display,
     $ui_weight,
+    weight,
     $ui_typeFace,
+    typeFace,
     $ui_textAlign,
+    textAlign,
     $ui_letterSpacing,
+    letterSpacing,
     $ui_transform,
+    transform,
     $ui_decoration,
+    decoration,
     $ui_className,
+    customClass,
     $ui_wordBreak,
+    wordBreak,
     $ui_wordWrap,
-    $ui_whiteSpace
+    wordWrap,
+    $ui_whiteSpace,
+    whiteSpace
   } = props;
+  const finalReset = shouldReset !== undefined ? shouldReset : $flag_reset;
+  const finalDotted = isDotted !== undefined ? isDotted : $flag_dotted;
+  const finalSize = size !== undefined ? size : $ui_size;
+  const finalLineClamp = lineClamp !== undefined ? lineClamp : $ui_lineClamp;
+  const finalDisplay = display !== undefined ? display : $ui_display;
+  const finalWeight = weight !== undefined ? weight : $ui_weight;
+  const finalTypeFace = typeFace !== undefined ? typeFace : $ui_typeFace;
+  const finalTextAlign = textAlign !== undefined ? textAlign : $ui_textAlign;
+  const finalTransform = transform !== undefined ? transform : $ui_transform;
+  const finalDecoration = decoration !== undefined ? decoration : $ui_decoration;
+  const finalClassName = customClass !== undefined ? customClass : $ui_className;
+  const finalWordBreak = wordBreak !== undefined ? wordBreak : $ui_wordBreak;
+  const finalWordWrap = wordWrap !== undefined ? wordWrap : $ui_wordWrap;
+  const finalWhiteSpace = whiteSpace !== undefined ? whiteSpace : $ui_whiteSpace;
+  let finalLineHeight = lineHeight !== undefined ? lineHeight : $ui_lineHeight;
+  let finalLetterSpacing = letterSpacing !== undefined ? letterSpacing : $ui_letterSpacing;
 
-  if ($ui_letterSpacing) {
-    $ui_letterSpacing = letterspacingMapping[$ui_letterSpacing];
+  if (finalLetterSpacing) {
+    finalLetterSpacing = letterspacingMapping[finalLetterSpacing];
   }
 
-  if ($ui_lineHeight) {
-    $ui_lineHeight = lineheightMapping[$ui_lineHeight];
+  if (finalLineHeight) {
+    finalLineHeight = lineheightMapping[finalLineHeight];
   }
 
   let typographyClass = compileClassNames({
-    [style.reset]: $flag_reset,
-    [style.dotted]: $flag_dotted,
-    [style[`size${$ui_size}`]]: !!$ui_size,
-    [style[`lineclamp_${$ui_lineClamp}`]]: !!$ui_lineClamp,
-    [style[`lineheight_${$ui_lineHeight}`]]: !!$ui_lineHeight,
-    [style[`display_${$ui_display}`]]: !!$ui_display,
-    [style[`font_${$ui_weight}`]]: !!$ui_weight,
-    [style[`fontStyles_${$ui_typeFace}`]]: !!$ui_typeFace,
-    [style[`textalign_${$ui_textAlign}`]]: !!$ui_textAlign,
-    [style[`letterspacing_${$ui_letterSpacing}`]]: !!$ui_letterSpacing,
-    [style[`transform_${$ui_transform}`]]: !!$ui_transform,
-    [style[`decoration_${$ui_decoration}`]]: !!$ui_decoration,
-    [$ui_className]: !!$ui_className,
-    [style[`wordBreak_${$ui_wordBreak}`]]: !!$ui_wordBreak,
-    [style[`wordWrap_${$ui_wordWrap}`]]: !!$ui_wordWrap,
-    [style[`whiteSpace_${$ui_whiteSpace}`]]: !!$ui_whiteSpace
+    [style.reset]: finalReset,
+    [style.dotted]: finalDotted,
+    [style[`size${finalSize}`]]: !!finalSize,
+    [style[`lineclamp_${finalLineClamp}`]]: !!finalLineClamp,
+    [style[`lineheight_${finalLineHeight}`]]: !!finalLineHeight,
+    [style[`display_${finalDisplay}`]]: !!finalDisplay,
+    [style[`font_${finalWeight}`]]: !!finalWeight,
+    [style[`fontStyles_${finalTypeFace}`]]: !!finalTypeFace,
+    [style[`textalign_${finalTextAlign}`]]: !!finalTextAlign,
+    [style[`letterspacing_${finalLetterSpacing}`]]: !!finalLetterSpacing,
+    [style[`transform_${finalTransform}`]]: !!finalTransform,
+    [style[`decoration_${finalDecoration}`]]: !!finalDecoration,
+    [finalClassName]: !!finalClassName,
+    [style[`wordBreak_${finalWordBreak}`]]: !!finalWordBreak,
+    [style[`wordWrap_${finalWordWrap}`]]: !!finalWordWrap,
+    [style[`whiteSpace_${finalWhiteSpace}`]]: !!finalWhiteSpace
   });
   return {
     typographyClass

package/es/Typography/props/defaultProps.js

@@ -1,9 +1,10 @@
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
 export const defaultProps = {
   $ui_className: '',
   $ui_tagName: 'div',
   $flag_reset: false,
   $flag_dotted: false,
-  $tagAttributes_text: {},
-  $a11yAttributes_text: {},
-  $ui_highlightConfig: {}
+  $tagAttributes_text: DUMMY_OBJECT,
+  $a11yAttributes_text: DUMMY_OBJECT,
+  $ui_highlightConfig: DUMMY_OBJECT
 };

package/es/Typography/props/propTypes.js

@@ -1,46 +1,88 @@
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types'; // Define prop types once to avoid duplication
+
+const propTypeDefinitions = {
+  shouldReset: PropTypes.bool,
+  display: PropTypes.oneOf(['block', 'inlineBlock', 'inline', 'initial']),
+  weight: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
+  isDotted: PropTypes.bool,
+  textAlign: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
+  transform: PropTypes.oneOf(['default', 'upper', 'lower', 'capital']),
+  lineClamp: PropTypes.oneOf(['1', '2', '3', '4', '5']),
+  typeFace: PropTypes.oneOf(['normal', 'italic']),
+  decoration: PropTypes.oneOf(['default', 'underline', 'strike', 'overline']),
+  size: PropTypes.oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
+  lineHeight: PropTypes.oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
+  letterSpacing: PropTypes.oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
+  wordBreak: PropTypes.oneOf(['breakAll', 'keepAll', 'breakWord']),
+  wordWrap: PropTypes.oneOf(['normal', 'break']),
+  whiteSpace: PropTypes.oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap', 'breakSpaces']),
+  customClass: PropTypes.string
+};
 const typoStyleProps = {
-  $flag_reset: PropTypes.bool,
-  $flag_dotted: PropTypes.bool,
-  $ui_display: PropTypes.oneOf(['block', 'inlineBlock', 'inline', 'initial']),
-  $ui_weight: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
-  $ui_textAlign: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
-  $ui_transform: PropTypes.oneOf(['default', 'upper', 'lower', 'capital']),
-  $ui_lineClamp: PropTypes.oneOf(['1', '2', '3', '4', '5']),
-  $ui_typeFace: PropTypes.oneOf(['normal', 'italic']),
-  $ui_decoration: PropTypes.oneOf(['default', 'underline', 'strike', 'overline']),
-  $ui_size: PropTypes.oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
-  $ui_lineHeight: PropTypes.oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
-  $ui_letterSpacing: PropTypes.oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
-  $ui_wordBreak: PropTypes.oneOf(['breakAll', 'keepAll', 'breakWord']),
-  $ui_wordWrap: PropTypes.oneOf(['normal', 'break']),
-  $ui_whiteSpace: PropTypes.oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),
-  $ui_className: PropTypes.string
+  $flag_reset: propTypeDefinitions.shouldReset,
+  shouldReset: propTypeDefinitions.shouldReset,
+  $flag_dotted: propTypeDefinitions.isDotted,
+  isDotted: propTypeDefinitions.isDotted,
+  $ui_display: propTypeDefinitions.display,
+  display: propTypeDefinitions.display,
+  $ui_weight: propTypeDefinitions.weight,
+  weight: propTypeDefinitions.weight,
+  $ui_textAlign: propTypeDefinitions.textAlign,
+  textAlign: propTypeDefinitions.textAlign,
+  $ui_transform: propTypeDefinitions.transform,
+  transform: propTypeDefinitions.transform,
+  $ui_lineClamp: propTypeDefinitions.lineClamp,
+  lineClamp: propTypeDefinitions.lineClamp,
+  $ui_typeFace: propTypeDefinitions.typeFace,
+  typeFace: propTypeDefinitions.typeFace,
+  $ui_decoration: propTypeDefinitions.decoration,
+  decoration: propTypeDefinitions.decoration,
+  $ui_size: propTypeDefinitions.size,
+  size: propTypeDefinitions.size,
+  $ui_lineHeight: propTypeDefinitions.lineHeight,
+  lineHeight: propTypeDefinitions.lineHeight,
+  $ui_letterSpacing: propTypeDefinitions.letterSpacing,
+  letterSpacing: propTypeDefinitions.letterSpacing,
+  $ui_wordBreak: propTypeDefinitions.wordBreak,
+  wordBreak: propTypeDefinitions.wordBreak,
+  $ui_wordWrap: propTypeDefinitions.wordWrap,
+  wordWrap: propTypeDefinitions.wordWrap,
+  $ui_whiteSpace: propTypeDefinitions.whiteSpace,
+  whiteSpace: propTypeDefinitions.whiteSpace,
+  $ui_className: propTypeDefinitions.customClass,
+  customClass: propTypeDefinitions.customClass
 };
 const highlightProps = {
   customStyle: PropTypes.object,
   shouldExcludeIndices: PropTypes.bool,
   isCaseSensitive: PropTypes.bool,
   isWholeWord: PropTypes.bool,
-  tagName: PropTypes.string,
+  as: PropTypes.string,
   renderHighlight: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   styleConfiguration: PropTypes.shape(typoStyleProps)
 };
+const highlightDataItemShape = PropTypes.shape({
+  text: PropTypes.string,
+  index: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
+  ...highlightProps
+});
+const highlightConfigShape = PropTypes.shape({
+  data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, highlightDataItemShape])),
+  ...highlightProps
+});
 export const propTypes = { ...typoStyleProps,
   children: PropTypes.node,
   $ui_tagName: PropTypes.string,
+  as: PropTypes.string,
   $i18n_dataTitle: PropTypes.string,
+  dataTitle: PropTypes.string,
   testId: PropTypes.string,
   customId: PropTypes.string,
   customStyle: PropTypes.object,
   $a11yAttributes_text: PropTypes.object,
+  a11yAttributes: PropTypes.object,
   $tagAttributes_text: PropTypes.object,
-  $ui_highlightConfig: PropTypes.shape({
-    data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
-      text: PropTypes.string,
-      index: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),
-      ...highlightProps
-    })])),
-    ...highlightProps
-  })
+  tagAttributes: PropTypes.object,
+  $ui_highlightConfig: highlightConfigShape,
+  highlightConfig: highlightConfigShape
 };

package/es/Typography/utils/textHighlighter.js

@@ -11,9 +11,11 @@ export function highlightText(config) {
     shouldExcludeIndices = false,
     isCaseSensitive: enableCaseSensitiveMatch = false,
     isWholeWord: matchWholeWordOnly = false,
-    tagName: wrapperTagName = 'span',
+    as: asTag,
+    tagName: tagNameLegacy,
     renderHighlight: customRenderer
   } = config;
+  const wrapperTagName = asTag ?? tagNameLegacy ?? 'span';
 
   if (!sourceText || !highlightData?.length) {
     return sourceText;
@@ -55,7 +57,7 @@ export function highlightText(config) {
       shouldExcludeIndices: itemConfiguration.shouldExcludeIndices !== undefined ? itemConfiguration.shouldExcludeIndices : shouldExcludeIndices,
       isCaseSensitive: itemConfiguration.isCaseSensitive !== undefined ? itemConfiguration.isCaseSensitive : enableCaseSensitiveMatch,
       matchWholeWordOnly: itemConfiguration.isWholeWord !== undefined ? itemConfiguration.isWholeWord : matchWholeWordOnly,
-      wrapperTagName: itemConfiguration.tagName !== undefined ? itemConfiguration.tagName : wrapperTagName,
+      wrapperTagName: itemConfiguration.as !== undefined ? itemConfiguration.as : itemConfiguration.tagName !== undefined ? itemConfiguration.tagName : wrapperTagName,
       customStyle: customStyle,
       customRenderer: itemConfiguration.renderHighlight !== undefined ? itemConfiguration.renderHighlight : customRenderer,
       highlightClasses: typographyClass,

package/es/shared/ArrowIcon/ArrowIcon.module.css

@@ -4,9 +4,10 @@
 
 .arrowIcon {
   composes: varClass;
+  margin-block:0 ;
+  margin-inline: var(--zd_size5) ;
   color: var(--local-arrowIcon-color);
   transition: transform var(--zd_transition3);
-  margin: 0 var(--zd_size5) ;
 }
 .transparentContainer .arrowIcon {
   opacity: 0;
@@ -39,4 +40,4 @@
 
 .readonly {
   composes: curdefault from '../../common/common.module.css';
-}
+}

package/es/v1/Button/Button.js

@@ -0,0 +1,201 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { forwardRef, memo, useMemo } from 'react';
+import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry';
+import Icon from '@zohodesk/icons/es/Icon';
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Typography from "../../Typography/Typography";
+import { isRenderable } from '@zohodesk/utils/es/renderNode';
+import renderNode from '@zohodesk/utils/es/renderNode';
+import propTypes from "./props/propTypes";
+import defaultProps from "./props/defaultProps";
+import { DUMMY_OBJECT } from '@zohodesk/dotkit/es/utils/constants';
+import { ICON_PLACEMENT, LOADER_PLACEMENT, STATUS, TYPOGRAPHY_SIZE_MAP, VARIANT } from "./constants";
+import Loader from "./_shared/Loader/Loader";
+import SuccessTick from "./_shared/SuccessTick/SuccessTick";
+import cssJSLogic from "./css/cssJSLogic";
+
+const getTypographySize = size => TYPOGRAPHY_SIZE_MAP[size] || '13';
+
+const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
+  const {
+    palette,
+    bgAppearance,
+    borderAppearance,
+    variant,
+    status,
+    loaderPlacement,
+    size,
+    iconName,
+    iconSize,
+    iconPlacement,
+    renderIcon,
+    renderBefore,
+    renderAfter,
+    renderLoader,
+    renderSuccess,
+    children,
+    type,
+    onClick,
+    isDisabled,
+    isReadOnly,
+    isSelected,
+    shape,
+    paletteShade,
+    disabledAppearance,
+    title,
+    customProps,
+    customAttributes,
+    a11yAttributes,
+    customId,
+    testId
+  } = props;
+  const isLoading = status === STATUS.LOADING;
+  const isSuccess = status === STATUS.SUCCESS;
+  const isDisabledState = isDisabled || isLoading;
+  const isInteractionDisabled = isDisabledState || isReadOnly;
+  const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+  const {
+    text: contentProps = DUMMY_OBJECT,
+    icon: iconProps = DUMMY_OBJECT
+  } = customProps;
+  const iconTagAttributes = useMemo(() => ({ ...(iconProps.tagAttributes || DUMMY_OBJECT),
+    'data-test-id': testId ? `${testId}_icon` : undefined
+  }), [iconProps.tagAttributes, testId]);
+  const classes = useMemo(() => cssJSLogic({
+    props
+  }), [palette, bgAppearance, borderAppearance, paletteShade, size, variant, status, isDisabled, isReadOnly, isSelected, shape, loaderPlacement, disabledAppearance, props.customClass]);
+  const {
+    loaderOverlayClass,
+    successOverlayClass,
+    contentWrapperClass,
+    textClassName,
+    buttonClassName
+  } = classes;
+  const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
+
+  const _handleClick = event => {
+    if (isInteractionDisabled) {
+      return;
+    }
+
+    onClick(event);
+  };
+
+  const _renderLoader = () => {
+    if (!isLoading) {
+      return null;
+    }
+
+    if (isRenderable(renderLoader)) {
+      return renderNode(renderLoader, {
+        status
+      });
+    }
+
+    const loaderClassName = loaderPlacement === LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: loaderClassName,
+      testId: testId ? `${testId}_loader` : undefined
+    }, /*#__PURE__*/React.createElement(Loader, null));
+  };
+
+  const _renderSuccess = () => {
+    if (!isSuccess) {
+      return null;
+    }
+
+    if (isRenderable(renderSuccess)) {
+      return renderNode(renderSuccess, {
+        status
+      });
+    }
+
+    const successClassName = loaderPlacement === LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: successClassName,
+      testId: testId ? `${testId}_success` : undefined
+    }, /*#__PURE__*/React.createElement(SuccessTick, null));
+  };
+
+  const _renderIconNode = () => {
+    if (!showIcon) {
+      return null;
+    }
+
+    if (isRenderable(renderIcon)) {
+      return renderNode(renderIcon);
+    }
+
+    return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+      name: iconName,
+      size: iconSize,
+      tagAttributes: iconTagAttributes,
+      dataId: testId ? `${testId}_icon` : undefined
+    }));
+  };
+
+  const _renderBeforeNode = () => {
+    if (!isRenderable(renderBefore)) {
+      return null;
+    }
+
+    return renderNode(renderBefore, props);
+  };
+
+  const _renderAfterNode = () => {
+    if (!isRenderable(renderAfter)) {
+      return null;
+    }
+
+    return renderNode(renderAfter, props);
+  };
+
+  const _renderContent = () => {
+    const shouldShowText = variant !== VARIANT.ICON && children !== undefined && children !== null;
+    const showLoaderStart = isLoading && loaderPlacement === LOADER_PLACEMENT.START;
+    const showLoaderAfter = isLoading && loaderPlacement === LOADER_PLACEMENT.END;
+    const showSuccessStart = isSuccess && loaderPlacement === LOADER_PLACEMENT.START;
+    const showSuccessAfter = isSuccess && loaderPlacement === LOADER_PLACEMENT.END;
+    return /*#__PURE__*/React.createElement(Flex, {
+      $ui_displayMode: "flex",
+      $ui_direction: "row",
+      $flag_shrink: true,
+      $ui_alignItems: "center",
+      $ui_justifyContent: "center",
+      $ui_className: contentWrapperClass
+    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, _renderBeforeNode(), iconPlacement === ICON_PLACEMENT.LEFT ? _renderIconNode() : null, shouldShowText ? /*#__PURE__*/React.createElement(Typography, _extends({}, contentProps, {
+      $ui_className: textClassName,
+      $ui_size: getTypographySize(size),
+      $flag_dotted: variant !== VARIANT.ICON
+    }), children) : null, iconPlacement === ICON_PLACEMENT.RIGHT ? _renderIconNode() : null, _renderAfterNode(), showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
+  };
+
+  const containerAttributes = { ...customAttributes,
+    'data-id': customId,
+    'data-test-id': testId,
+    'data-title': title
+  };
+  return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, a11yAttributes, {
+    ref: ref,
+    type: type,
+    className: buttonClassName,
+    "aria-busy": isLoading,
+    "aria-disabled": isDisabledState,
+    "aria-readonly": isReadOnly,
+    "aria-pressed": isSelected,
+    onClick: _handleClick
+  }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
+});
+Button.propTypes = propTypes;
+Button.defaultProps = defaultProps;
+Button.displayName = 'Button';
+export default withComponentRegistrar( /*#__PURE__*/memo(Button), {
+  name: 'ZDC_V1_Button'
+});

package/es/v1/Button/README.md

@@ -0,0 +1,110 @@
+# Button
+
+A composable button component with palette-based theming, loading/success status states, and flexible icon/content slots.
+
+## Import
+
+```jsx
+import Button from '@zohodesk/components/es/v1/Button/Button';
+```
+
+## Usage
+
+### Default
+
+```jsx
+<Button customId="saveBtn" testId="saveBtn">
+  Save changes
+</Button>
+```
+
+### With Palette Variants
+
+```jsx
+<Button palette="primary">Save</Button>
+<Button palette="danger">Delete</Button>
+<Button palette="success">Confirm</Button>
+```
+
+### With Icon
+
+```jsx
+<Button variant="icon" iconName="ZD-plus" iconSize={20} />
+
+<Button variant="iconWithText" iconName="ZD-plus" iconPlacement="left">
+  Add Item
+</Button>
+```
+
+### Loading State
+
+```jsx
+<Button status="loading" loaderPlacement="overlay">
+  Saving...
+</Button>
+
+<Button status="loading" loaderPlacement="start">
+  Loading
+</Button>
+```
+
+### Disabled / Read Only
+
+```jsx
+<Button isDisabled>Disabled</Button>
+<Button isReadOnly>Read Only</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 |
+| `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 |
+| `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 |
+| `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 |
+
+## Customization
+
+### Parts
+
+| Part | Element | Description |
+|---|---|---|
+| `wrapper` | `<button>` root | The outermost button element |
+| `text` | Typography | The text label |
+
+### CSS Custom Properties
+
+The `.varClass` block in `Button.module.css` defines local custom properties that size variants override:
+
+| 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 |