@zohodesk/components 1.6.24 → 1.6.26

package/es/v1/Button/Button.js

@@ -6,31 +6,31 @@ 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 renderNode, { isRenderable } from '@zohodesk/utils/es/renderNode';
 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 Typography from "../../Typography/Typography";
+import Spinner from "../shared/Spinner/Spinner";
 import SuccessTick from "../shared/SuccessTick/SuccessTick";
 import cssJSLogic from "./css/cssJSLogic";
+import propTypes from "./props/propTypes";
+import defaultProps from "./props/defaultProps";
 
 const getTypographySize = size => TYPOGRAPHY_SIZE_MAP[size] || '13';
 
-const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
+export const ButtonPresentational = /*#__PURE__*/forwardRef(function ButtonPresentational(props, ref) {
   const {
-    palette,
-    bgAppearance,
-    borderAppearance,
+    isLoading,
+    isSuccess,
+    isDisabled,
+    isDisabledState,
+    overlayActive,
     variant,
-    status,
+    iconPlacement,
     loaderPlacement,
     size,
     iconName,
     iconSize,
-    iconPlacement,
     renderIcon,
     renderBefore,
     renderAfter,
@@ -38,131 +38,107 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     renderSuccess,
     children,
     type,
-    onClick,
-    isDisabled,
-    isReadOnly,
     isSelected,
-    shape,
-    paletteShade,
-    disabledAppearance,
     title,
     customProps,
     customAttributes,
     a11yAttributes,
     customId,
-    testId
+    testId,
+    dataSelectorId,
+    handleClick,
+    classNames
   } = 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,
-    iconClassName
-  } = classes;
-  const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
-
-  const _handleClick = event => {
-    if (isInteractionDisabled) {
-      return;
-    }
-
-    onClick(event);
+    iconClassName,
+    loaderClassName,
+    successClassName
+  } = classNames;
+  const {
+    text: contentProps = DUMMY_OBJECT,
+    icon: iconProps = DUMMY_OBJECT
+  } = customProps || DUMMY_OBJECT;
+  const {
+    button: buttonAttributes = DUMMY_OBJECT,
+    contentWrapper: contentWrapperAttributes = DUMMY_OBJECT,
+    loader: loaderAttributes = DUMMY_OBJECT,
+    success: successAttributes = DUMMY_OBJECT,
+    icon: iconAttributes = DUMMY_OBJECT,
+    text: textAttributes = DUMMY_OBJECT
+  } = customAttributes || DUMMY_OBJECT;
+  const iconTagAttributes = { ...iconAttributes,
+    ...(testId && {
+      'data-test-id': `${testId}_icon`
+    })
   };
 
   const _renderLoader = () => {
-    if (!isLoading) {
-      return null;
-    }
-
-    if (isRenderable(renderLoader)) {
-      return renderNode(renderLoader, {
-        status
-      });
-    }
-
-    const loaderClassName = loaderPlacement === LOADER_PLACEMENT.OVERLAY ? loaderOverlayClass : '';
+    if (!isLoading) return null;
+    const isOverlay = loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+    const hasCustomLoader = isRenderable(renderLoader);
+    if (hasCustomLoader && !isOverlay) return renderNode(renderLoader, {
+      status: STATUS.LOADING
+    });
     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));
+      $ui_className: isOverlay ? loaderOverlayClass : '',
+      testId: testId ? `${testId}_loader` : undefined,
+      customId: customId ? `${customId}_loader` : undefined,
+      $tagAttributes_container: hasCustomLoader ? undefined : loaderAttributes
+    }, hasCustomLoader ? renderNode(renderLoader, {
+      status: STATUS.LOADING
+    }) : /*#__PURE__*/React.createElement(Spinner, {
+      customClass: loaderClassName
+    }));
   };
 
   const _renderSuccess = () => {
-    if (!isSuccess) {
-      return null;
-    }
-
-    if (isRenderable(renderSuccess)) {
-      return renderNode(renderSuccess, {
-        status
-      });
-    }
-
-    const successClassName = loaderPlacement === LOADER_PLACEMENT.OVERLAY ? successOverlayClass : '';
+    if (!isSuccess) return null;
+    const isOverlay = loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+    const hasCustomSuccess = isRenderable(renderSuccess);
+    if (hasCustomSuccess && !isOverlay) return renderNode(renderSuccess, {
+      status: STATUS.SUCCESS
+    });
     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));
+      $ui_className: isOverlay ? successOverlayClass : '',
+      testId: testId ? `${testId}_success` : undefined,
+      customId: customId ? `${customId}_success` : undefined,
+      $tagAttributes_container: hasCustomSuccess ? undefined : successAttributes
+    }, hasCustomSuccess ? renderNode(renderSuccess, {
+      status: STATUS.SUCCESS
+    }) : /*#__PURE__*/React.createElement(SuccessTick, {
+      customClass: successClassName
+    }));
   };
 
   const _renderIconNode = () => {
-    if (!showIcon) {
-      return null;
-    }
-
-    if (isRenderable(renderIcon)) {
-      return renderNode(renderIcon);
-    }
-
+    const showIcon = variant !== VARIANT.TEXT && (renderIcon || iconName);
+    if (!showIcon) return null;
+    if (isRenderable(renderIcon)) return renderNode(renderIcon, {
+      iconName,
+      iconSize
+    });
     return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
       iconClass: iconClassName,
       name: iconName,
       size: iconSize,
       tagAttributes: iconTagAttributes,
-      dataId: testId ? `${testId}_icon` : undefined
+      dataId: customId ? `${customId}_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 shouldShowText = variant !== VARIANT.ICON && children != null && (typeof children !== 'string' || children.trim() !== '');
     const showLoaderStart = isLoading && loaderPlacement === LOADER_PLACEMENT.START;
     const showLoaderAfter = isLoading && loaderPlacement === LOADER_PLACEMENT.END;
     const showSuccessStart = isSuccess && loaderPlacement === LOADER_PLACEMENT.START;
@@ -173,30 +149,138 @@ const Button = /*#__PURE__*/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 === 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);
+      $ui_className: contentWrapperClass,
+      $tagAttributes_container: contentWrapperAttributes
+    }, showLoaderStart ? _renderLoader() : null, showSuccessStart ? _renderSuccess() : null, isRenderable(renderBefore) ? renderNode(renderBefore, props) : null, iconPlacement === ICON_PLACEMENT.START ? _renderIconNode() : null, shouldShowText ? typeof children === 'string' ? /*#__PURE__*/React.createElement(Typography, _extends({
+      size: getTypographySize(size)
+    }, contentProps, {
+      tagAttributes: textAttributes,
+      customClass: textClassName,
+      isDotted: true
+    }), children) : children : null, iconPlacement === ICON_PLACEMENT.END ? _renderIconNode() : null, isRenderable(renderAfter) ? renderNode(renderAfter, props) : null, showLoaderAfter ? _renderLoader() : null, showSuccessAfter ? _renderSuccess() : null);
   };
 
-  const containerAttributes = { ...customAttributes,
-    'data-id': customId,
-    'data-test-id': testId,
-    'data-title': title
+  const containerAttributes = { ...buttonAttributes,
+    ...(customId && {
+      'data-id': isDisabled ? `${customId}_disabled` : customId
+    }),
+    ...(testId && {
+      'data-test-id': isDisabled ? `${testId}_disabled` : testId
+    }),
+    ...(dataSelectorId && {
+      'data-selector-id': dataSelectorId
+    }),
+    ...(title && {
+      'data-title': title
+    })
   };
-  return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, a11yAttributes, {
+  return /*#__PURE__*/React.createElement("button", _extends({}, containerAttributes, {
+    "aria-busy": isLoading,
+    "aria-disabled": isDisabledState,
+    "aria-pressed": isSelected
+  }, a11yAttributes, {
     ref: ref,
     type: type,
     className: cn(buttonClassName),
-    "aria-busy": isLoading,
-    "aria-disabled": isDisabledState,
-    "aria-readonly": isReadOnly,
-    "aria-pressed": isSelected,
-    onClick: _handleClick
+    onClick: handleClick
   }), _renderContent(), overlayActive ? isLoading ? _renderLoader() : _renderSuccess() : null);
 });
+ButtonPresentational.displayName = 'ButtonPresentational';
+const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
+  const {
+    palette,
+    appearance,
+    hoverAppearance,
+    selectedAppearance,
+    variant,
+    status,
+    loaderPlacement,
+    size,
+    iconName,
+    iconSize,
+    iconPlacement,
+    renderIcon,
+    renderBefore,
+    renderAfter,
+    renderLoader,
+    renderSuccess,
+    children,
+    type,
+    onClick,
+    isDisabled,
+    isSelected,
+    shape,
+    disabledAppearance,
+    title,
+    customProps,
+    customAttributes,
+    a11yAttributes,
+    customId,
+    testId,
+    dataSelectorId,
+    customClass
+  } = props;
+  const isLoading = status === STATUS.LOADING;
+  const isSuccess = status === STATUS.SUCCESS;
+  const isDisabledState = isDisabled || isLoading;
+  const overlayActive = (isLoading || isSuccess) && loaderPlacement === LOADER_PLACEMENT.OVERLAY;
+  const classNames = useMemo(() => cssJSLogic({
+    props: {
+      palette,
+      appearance,
+      hoverAppearance,
+      selectedAppearance,
+      size,
+      variant,
+      status,
+      isDisabled,
+      isSelected,
+      shape,
+      loaderPlacement,
+      disabledAppearance,
+      customClass
+    }
+  }), [palette, appearance, hoverAppearance, selectedAppearance, size, variant, status, isDisabled, isSelected, shape, loaderPlacement, disabledAppearance, customClass]);
+
+  const handleClick = event => {
+    if (isDisabledState) return;
+    onClick(event);
+  };
+
+  const essentials = {
+    isLoading,
+    isSuccess,
+    isDisabled,
+    isDisabledState,
+    overlayActive,
+    variant,
+    iconPlacement,
+    loaderPlacement,
+    size,
+    iconName,
+    iconSize,
+    renderIcon,
+    renderBefore,
+    renderAfter,
+    renderLoader,
+    renderSuccess,
+    children,
+    type,
+    isSelected,
+    title,
+    customProps,
+    customAttributes,
+    a11yAttributes,
+    customId,
+    testId,
+    dataSelectorId,
+    handleClick
+  };
+  return /*#__PURE__*/React.createElement(ButtonPresentational, _extends({}, essentials, {
+    classNames: classNames,
+    ref: ref
+  }));
+});
 Button.propTypes = propTypes;
 Button.defaultProps = defaultProps;
 Button.displayName = 'Button';

package/es/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>
+```