@availity/mui-button 0.1.3 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.0](https://github.com/Availity/element/compare/@availity/mui-button@0.1.3...@availity/mui-button@0.2.0) (2023-06-01)
+
+
+### Features
+
+* **mui-button:** design specs ([6b67b24](https://github.com/Availity/element/commit/6b67b24cdfef68e14daaeba18a5fd7d90af46a09))
+
 ## [0.1.3](https://github.com/Availity/element/compare/@availity/mui-button@0.1.2...@availity/mui-button@0.1.3) (2023-04-07)
 
 ## [0.1.2](https://github.com/Availity/element/compare/@availity/mui-button@0.1.1...@availity/mui-button@0.1.2) (2023-03-23)

package/dist/index.d.ts

@@ -1,9 +1,44 @@
-import React from 'react';
-import { ButtonProps as ButtonProps$1 } from '@mui/material';
+import * as react from 'react';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import { ButtonProps as ButtonProps$1, IconButtonProps as IconButtonProps$1 } from '@mui/material';
+import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab/LoadingButton';
 
 type ButtonProps = {
+    /** The color of the component.
+     * @default secondary */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+    /** The variant to use.
+     * @default contained */
+    variant?: 'outlined' | 'contained';
+    /** Internal prop used by IconButton for contained variant. */
+    iconOnly?: boolean;
+} & Omit<ButtonProps$1, 'color' | 'variant' | 'disableElevation' | 'disableFocusRipple' | 'disableTouchRipple' | 'centerRipple' | 'disableRipple' | 'focusRipple' | 'TouchRippleProps' | 'touchRippleRef'>;
+declare const Button: react.ForwardRefExoticComponent<Pick<ButtonProps, keyof _mui_material_OverridableComponent.CommonProps | "form" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "disabled" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "iconOnly"> & react.RefAttributes<HTMLButtonElement>>;
+
+type IconButtonProps = {
+    /**
+     * Text for tooltip and aria-label
+     */
+    title: string;
+    children: React.ReactNode;
+    /**
+     * Toggles contained Button styling
+     */
+    filled?: boolean;
+    /**
+     * The color of the component.
+     */
+    color?: "primary" | "secondary" | "tertiary" | "error";
+} & Omit<IconButtonProps$1, 'aria-label' | 'color' | 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'disableFocusRipple' | 'TouchRippleProps' | 'touchRippleRef'>;
+declare const IconButton: ({ children, title, filled, color, ...rest }: IconButtonProps) => JSX.Element;
+
+type LoadingButtonProps = {
     children: React.ReactNode;
-} & ButtonProps$1;
-declare const Button: ({ children, ...rest }: ButtonProps) => JSX.Element;
+    /**
+     * The color of the component.
+     */
+    color?: 'primary' | 'secondary' | 'error';
+} & Omit<LoadingButtonProps$1, 'color' | 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'disableFocusRipple' | 'TouchRippleProps' | 'touchRippleRef' | 'loadingIndicator' | 'loadingPosition'>;
+declare const LoadingButton: react.ForwardRefExoticComponent<Pick<LoadingButtonProps, keyof _mui_material_OverridableComponent.CommonProps | "form" | "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "disabled" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "disableElevation" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant" | "key" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "loading"> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Button, ButtonProps };
+export { Button, ButtonProps, IconButton, IconButtonProps, LoadingButton, LoadingButtonProps };

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,23 +17,118 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  Button: () => Button
+  Button: () => Button,
+  IconButton: () => IconButton,
+  LoadingButton: () => LoadingButton
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/lib/Button.tsx
+var import_react = require("react");
 var import_material = require("@mui/material");
 var import_jsx_runtime = require("react/jsx-runtime");
-var Button = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, {
-  ...rest,
-  children
+var tertiaryContainedStyles = {
+  bgcolor: "tertiary.main",
+  color: "black",
+  "&:focus, &:hover": {
+    bgcolor: "tertiary.dark"
+  },
+  "&:active": {
+    bgcolor: "tertiary.light"
+  }
+};
+var iconOnlyStyles = {
+  minWidth: 2,
+  px: 1,
+  "& .MuiButton-startIcon": {
+    m: 0
+  },
+  "& .MuiButton-endIcon": {
+    m: 0
+  }
+};
+var Button = (0, import_react.forwardRef)((props, ref) => {
+  const { color = "secondary", variant = "contained", iconOnly, sx, ...rest } = props;
+  const styles = {
+    ...color == "tertiary" && variant == "contained" && tertiaryContainedStyles,
+    ...iconOnly && iconOnlyStyles
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, {
+    color: color == "tertiary" ? "secondary" : color,
+    variant,
+    sx: { ...styles, ...sx },
+    disableRipple: true,
+    ...rest,
+    ref
+  });
+});
+
+// src/lib/IconButton.tsx
+var import_material2 = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var IconButton = ({ children, title, filled, color = "tertiary", ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material2.Tooltip, {
+    title,
+    children: filled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+      "aria-label": title,
+      color,
+      startIcon: children,
+      iconOnly: true,
+      ...rest,
+      children: "\u2060"
+    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material2.IconButton, {
+      "aria-label": title,
+      disableRipple: true,
+      color: color === "tertiary" ? "secondary" : color,
+      ...rest,
+      children
+    })
+  });
+};
+
+// src/lib/LoadingButton.tsx
+var import_react2 = require("react");
+var import_LoadingButton = __toESM(require("@mui/lab/LoadingButton"));
+var import_CircularProgress = __toESM(require("@mui/material/CircularProgress"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var LoadingIndicator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CircularProgress.default, {
+  color: "inherit",
+  size: 16,
+  "aria-label": "loading"
+});
+var LoadingButton = (0, import_react2.forwardRef)((props, ref) => {
+  const { children, loading, ...rest } = props;
+  const loadingPosition = rest.startIcon ? "start" : "end";
+  const nonLoadingStyling = rest.startIcon || rest.endIcon || loading ? {} : { padding: "0 .7rem" };
+  const endIcon = rest.startIcon ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+    style: loading ? { padding: "0 .7rem" } : {}
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_LoadingButton.default, {
+    endIcon,
+    loadingPosition,
+    loading,
+    disableRipple: true,
+    loadingIndicator: LoadingIndicator,
+    ...rest,
+    ref,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+      style: nonLoadingStyling,
+      children
+    })
+  });
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button
+  Button,
+  IconButton,
+  LoadingButton
 });

package/dist/index.mjs

@@ -1,10 +1,99 @@
 // src/lib/Button.tsx
+import { forwardRef } from "react";
 import { Button as MUIButton } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
-var Button = ({ children, ...rest }) => /* @__PURE__ */ jsx(MUIButton, {
-  ...rest,
-  children
+var tertiaryContainedStyles = {
+  bgcolor: "tertiary.main",
+  color: "black",
+  "&:focus, &:hover": {
+    bgcolor: "tertiary.dark"
+  },
+  "&:active": {
+    bgcolor: "tertiary.light"
+  }
+};
+var iconOnlyStyles = {
+  minWidth: 2,
+  px: 1,
+  "& .MuiButton-startIcon": {
+    m: 0
+  },
+  "& .MuiButton-endIcon": {
+    m: 0
+  }
+};
+var Button = forwardRef((props, ref) => {
+  const { color = "secondary", variant = "contained", iconOnly, sx, ...rest } = props;
+  const styles = {
+    ...color == "tertiary" && variant == "contained" && tertiaryContainedStyles,
+    ...iconOnly && iconOnlyStyles
+  };
+  return /* @__PURE__ */ jsx(MUIButton, {
+    color: color == "tertiary" ? "secondary" : color,
+    variant,
+    sx: { ...styles, ...sx },
+    disableRipple: true,
+    ...rest,
+    ref
+  });
+});
+
+// src/lib/IconButton.tsx
+import { IconButton as MuiIconButton, Tooltip } from "@mui/material";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var IconButton = ({ children, title, filled, color = "tertiary", ...rest }) => {
+  return /* @__PURE__ */ jsx2(Tooltip, {
+    title,
+    children: filled ? /* @__PURE__ */ jsx2(Button, {
+      "aria-label": title,
+      color,
+      startIcon: children,
+      iconOnly: true,
+      ...rest,
+      children: "\u2060"
+    }) : /* @__PURE__ */ jsx2(MuiIconButton, {
+      "aria-label": title,
+      disableRipple: true,
+      color: color === "tertiary" ? "secondary" : color,
+      ...rest,
+      children
+    })
+  });
+};
+
+// src/lib/LoadingButton.tsx
+import { forwardRef as forwardRef2 } from "react";
+import MUILoadingButton from "@mui/lab/LoadingButton";
+import CircularProgress from "@mui/material/CircularProgress";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var LoadingIndicator = /* @__PURE__ */ jsx3(CircularProgress, {
+  color: "inherit",
+  size: 16,
+  "aria-label": "loading"
+});
+var LoadingButton = forwardRef2((props, ref) => {
+  const { children, loading, ...rest } = props;
+  const loadingPosition = rest.startIcon ? "start" : "end";
+  const nonLoadingStyling = rest.startIcon || rest.endIcon || loading ? {} : { padding: "0 .7rem" };
+  const endIcon = rest.startIcon ? void 0 : /* @__PURE__ */ jsx3("span", {
+    style: loading ? { padding: "0 .7rem" } : {}
+  });
+  return /* @__PURE__ */ jsx3(MUILoadingButton, {
+    endIcon,
+    loadingPosition,
+    loading,
+    disableRipple: true,
+    loadingIndicator: LoadingIndicator,
+    ...rest,
+    ref,
+    children: /* @__PURE__ */ jsx3("span", {
+      style: nonLoadingStyling,
+      children
+    })
+  });
 });
 export {
-  Button
+  Button,
+  IconButton,
+  LoadingButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-button",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Availity MUI Button Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/index.ts

@@ -1 +1,3 @@
 export * from './lib/Button';
+export * from './lib/IconButton';
+export * from './lib/LoadingButton';

package/src/lib/Button.tsx

@@ -1,15 +1,67 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import { Button as MUIButton } from '@mui/material';
 import type { ButtonProps as MUIButtonProps } from '@mui/material';
 
 export type ButtonProps = {
-  children: React.ReactNode;
-} & MUIButtonProps;
+  /** The color of the component.
+   * @default secondary */
+  color?: 'primary' | 'secondary' | 'tertiary' | 'error';
+  /** The variant to use.
+   * @default contained */
+  variant?: 'outlined' | 'contained';
+  /** Internal prop used by IconButton for contained variant. */
+  iconOnly?: boolean;
+} & Omit<
+  MUIButtonProps,
+  | 'color'
+  | 'variant'
+  | 'disableElevation'
+  | 'disableFocusRipple'
+  | 'disableTouchRipple'
+  | 'centerRipple'
+  | 'disableRipple'
+  | 'focusRipple'
+  | 'TouchRippleProps'
+  | 'touchRippleRef'
+>;
 
-export const Button = ({ children, ...rest }: ButtonProps): JSX.Element => (
-  <MUIButton {...rest}>
-    {children}
-  </MUIButton>
-);
+const tertiaryContainedStyles = {
+  bgcolor: 'tertiary.main',
+  color: 'black',
+  '&:focus, &:hover': {
+    bgcolor: 'tertiary.dark',
+  },
+  '&:active': {
+    bgcolor: 'tertiary.light',
+  },
+};
 
+const iconOnlyStyles = {
+  minWidth: 2,
+  px: 1,
+  '& .MuiButton-startIcon': {
+    m: 0,
+  },
+  '& .MuiButton-endIcon': {
+    m: 0,
+  },
+};
 
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { color = 'secondary', variant = 'contained', iconOnly, sx, ...rest } = props;
+  const styles = {
+    ...(color == 'tertiary' && variant == 'contained' && tertiaryContainedStyles),
+    ...(iconOnly && iconOnlyStyles),
+  };
+
+  return (
+    <MUIButton
+      color={color == 'tertiary' ? 'secondary' : color}
+      variant={variant}
+      sx={{ ...styles, ...sx }}
+      disableRipple
+      {...rest}
+      ref={ref}
+    />
+  );
+});

package/src/lib/IconButton.tsx

@@ -0,0 +1,35 @@
+import { IconButton as MuiIconButton, Tooltip } from '@mui/material';
+import type { IconButtonProps as MUIIconButtonProps } from '@mui/material';
+import { Button } from './Button';
+
+export type IconButtonProps = {
+  /**
+   * Text for tooltip and aria-label
+   */
+  title: string;
+  children: React.ReactNode;
+  /**
+   * Toggles contained Button styling
+   */
+  filled?: boolean;
+  /**
+   * The color of the component.
+   */
+  color?: "primary" | "secondary" | "tertiary" | "error";
+} & Omit<MUIIconButtonProps, 'aria-label' | 'color' | 'centerRipple' | 'disableRipple' | 'disableTouchRipple' | 'focusRipple' | 'disableFocusRipple' | 'TouchRippleProps' | 'touchRippleRef'>;
+
+
+
+export const IconButton = ({ children, title, filled, color = 'tertiary', ...rest }: IconButtonProps): JSX.Element => {
+  return (
+    <Tooltip title={title}>
+      { filled ?
+        <Button aria-label={title} color={color} startIcon={children} iconOnly {...rest}>{'\u2060'}</Button>
+        :
+        <MuiIconButton aria-label={title} disableRipple color={color === 'tertiary' ? 'secondary' : color} {...rest}>
+          {children}
+        </MuiIconButton>
+      }
+    </Tooltip>
+  );
+}

package/src/lib/LoadingButton.tsx

@@ -1,14 +1,47 @@
-import React from 'react';
-import MUILoadingButton, { LoadingButtonProps as MuiLoadingButtonProps} from '@mui/lab/LoadingButton';
+import { forwardRef } from 'react';
+import MUILoadingButton, { LoadingButtonProps as MuiLoadingButtonProps } from '@mui/lab/LoadingButton';
+import CircularProgress from '@mui/material/CircularProgress';
 
 export type LoadingButtonProps = {
   children: React.ReactNode;
-} & MuiLoadingButtonProps;
+  /**
+   * The color of the component.
+   */
+  color?: 'primary' | 'secondary' | 'error';
+} & Omit<
+  MuiLoadingButtonProps,
+  | 'color'
+  | 'centerRipple'
+  | 'disableRipple'
+  | 'disableTouchRipple'
+  | 'focusRipple'
+  | 'disableFocusRipple'
+  | 'TouchRippleProps'
+  | 'touchRippleRef'
+  | 'loadingIndicator'
+  | 'loadingPosition'
+>;
 
-export const LoadingButton = ({ children, ...rest }: LoadingButtonProps): JSX.Element => (
-  <MUILoadingButton {...rest}>
-    {children}
-  </MUILoadingButton>
-);
+const LoadingIndicator = <CircularProgress color="inherit" size={16} aria-label="loading" />;
 
+export const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>((props, ref) => {
+  const { children, loading, ...rest } = props;
+  //changing default loading button behavior to add end loading icon instead of replacing contents completely with icon
+  const loadingPosition = rest.startIcon ? 'start' : 'end';
+  const nonLoadingStyling = rest.startIcon || rest.endIcon || loading ? {} : { padding: '0 .7rem' };
+  const endIcon = rest.startIcon ? undefined : <span style={loading ? { padding: '0 .7rem' } : {}}></span>;
 
+  return (
+    <MUILoadingButton
+      endIcon={endIcon}
+      loadingPosition={loadingPosition}
+      loading={loading}
+      disableRipple
+      loadingIndicator={LoadingIndicator}
+      {...rest}
+      ref={ref}
+    >
+      <span style={nonLoadingStyling}>{children}</span>
+    </MUILoadingButton>
+  );
+});