@nutui/nutui-react-taro 2.4.0 → 2.4.1-beta.1

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.4.0 Fri Mar 08 2024 14:36:52 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.4.1 Fri Mar 15 2024 20:38:51 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -258,7 +258,7 @@ const Button = React__default.forwardRef(
               [`${prefixCls$2}-${size}`]: size,
               [`${prefixCls$2}-${shape}`]: shape,
               [`${prefixCls$2}-block`]: block,
-              [`${prefixCls$2}-disabled`]: disabled,
+              [`${prefixCls$2}-disabled`]: disabled || loading,
               [`${prefixCls$2}-loading`]: loading
             },
             className
@@ -4930,19 +4930,33 @@ const defaultProps$1d = {
   max: 99,
   top: "4",
   right: "8",
-  color: ""
+  color: "",
+  fill: "solid"
 };
 const Badge = (props) => {
   var _a;
   const rtl = useRtl();
-  const { className, style, value, max, children, dot, top, right: right2, color } = {
+  const {
+    className,
+    style,
+    value,
+    max,
+    children,
+    dot,
+    top,
+    right: right2,
+    color,
+    fill
+  } = {
     ...defaultProps$1d,
     ...props
   };
   const classPrefix2 = "nut-badge";
-  const classes = classNames(classPrefix2, className);
+  const classes = classNames(classPrefix2, className, {
+    [`${classPrefix2}-${fill}`]: fill === "outline"
+  });
   function content() {
-    if (dot || typeof value === "object")
+    if (dot || typeof value === "object" || value === 0)
       return null;
     if (typeof value === "number" && typeof max === "number") {
       return max < value ? `${max}+` : `${value}`;
@@ -4974,7 +4988,18 @@ const Badge = (props) => {
     style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
     const dir = rtl ? "left" : "right";
     style2[dir] = `${Number(right2) || parseFloat(String(right2)) || 0}px`;
-    style2.background = color;
+    if (color) {
+      if (fill === "outline") {
+        style2.color = color;
+        style2.background = "#fff";
+        if (!(color == null ? void 0 : color.includes("gradient"))) {
+          style2.border = `1px solid ${color}`;
+        }
+      } else {
+        style2.color = "#fff";
+        style2.background = color;
+      }
+    }
     return style2;
   };
   return /* @__PURE__ */ React__default.createElement("div", { className: classes, style }, isIcon() && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-icon` }, value), children, !isIcon() && /* @__PURE__ */ React__default.createElement("div", { className: contentClasses, style: getStyle() }, content()));
@@ -5172,6 +5197,7 @@ const defaultProps$19 = {
 };
 const classPrefix$k = "nut-tabs";
 const Tabs = (props) => {
+  const rtl = useRtl();
   const {
     activeColor,
     tabStyle,
@@ -5307,6 +5333,7 @@ const Tabs = (props) => {
             DEFAULT_PADDING
           );
           to = left2 - (navRectRef.current.width - titleRect.width) / 2;
+          to = rtl ? -to : to;
         }
         nextTick(() => {
           scrollWithAnimation.current = true;
@@ -5316,9 +5343,12 @@ const Tabs = (props) => {
     });
   };
   useEffect(() => {
-    const index = titles.current.findIndex((t2) => t2.value === value);
+    let index = titles.current.findIndex(
+      (t2) => String(t2.value) === String(value)
+    );
+    index = index < 0 ? 0 : index;
     setContentStyle({
-      transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
+      transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
       transitionDuration: `${duration}ms`
     });
     scrollIntoView(index);
@@ -5339,7 +5369,7 @@ const Tabs = (props) => {
       scrollLeft,
       scrollTop,
       showScrollbar: false,
-      scrollWithAnimation: scrollWithAnimation.current,
+      scrollWithAnimation: rtl && Taro.getEnv() !== "WEB" ? false : scrollWithAnimation.current,
       id: `nut-tabs-titles-${name || uuid}`,
       className: classesTitle,
       style: { ...tabStyle }
@@ -7466,7 +7496,7 @@ const CalendarCard = React__default.forwardRef((props, ref) => {
           change([day]);
         } else if (len === 1) {
           const t2 = compareDay(innerValue[0], day);
-          if (t2 === 0 || t2 === null || t2 === void 0) {
+          if (t2 === null || t2 === void 0) {
             change([]);
           } else if (t2 < 0) {
             change([innerValue[0], day]);
@@ -11574,6 +11604,8 @@ const Range = (props) => {
     touch.move(event);
     setDragStatus("draging");
     const rect = await getRectByTaro(root2.current);
+    if (!rect)
+      return;
     let delta = touch.deltaX.current;
     let total = rect.width;
     let diff = delta / total * scope();
@@ -13570,9 +13602,9 @@ const Drag = (props) => {
 Drag.defaultProps = defaultProps$F;
 Drag.displayName = "NutDrag";
 const defaultStatus = {
-  empty: "https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png",
-  error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
-  network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
+  empty: "https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png",
+  error: "https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png",
+  network: "https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png"
 };
 const defaultProps$E = {
   ...ComponentDefaults,
@@ -13646,6 +13678,7 @@ Empty.defaultProps = defaultProps$E;
 Empty.displayName = "NutEmpty";
 const defaultProps$D = {
   ...ComponentDefaults,
+  type: "default",
   hasMore: true,
   threshold: 40,
   target: "",
@@ -13656,6 +13689,7 @@ const InfiniteLoading = (props) => {
   const { locale } = useConfig$1();
   const {
     children,
+    type: type4,
     hasMore,
     threshold,
     target,
@@ -13680,7 +13714,7 @@ const InfiniteLoading = (props) => {
   const y = useRef(0);
   const refreshMaxH = useRef(0);
   const distance = useRef(0);
-  const classes = classNames(classPrefix$e, className);
+  const classes = classNames(classPrefix$e, className, `${classPrefix$e}-${type4}`);
   useEffect(() => {
     refreshMaxH.current = threshold;
     setTimeout(() => {
@@ -14634,6 +14668,7 @@ function rubberbandIfOutOfBounds(position, min, max, dimension, constant = 0.15)
 const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
 const defaultProps$y = {
   ...ComponentDefaults,
+  type: "default",
   pullingText: "",
   canReleaseText: "",
   refreshingText: "",
@@ -14660,6 +14695,11 @@ const PullToRefresh = (p) => {
       completeText: p.completeText || locale.pullToRefresh.completeText
     }
   };
+  const classes = classNames(
+    classPrefix2,
+    props.className,
+    `${classPrefix2}-${props.type}`
+  );
   const headHeight = props.headHeight;
   const threshold = props.threshold;
   const pullingRef = useRef(false);
@@ -14751,7 +14791,7 @@ const PullToRefresh = (p) => {
   return /* @__PURE__ */ React__default.createElement(
     View,
     {
-      className: `${classPrefix2} ${props.className}`,
+      className: classes,
       style: props.style,
       onTouchStart: handleTouchStart,
       onTouchMove: handleTouchMove,
@@ -14997,11 +15037,11 @@ const Swipe = forwardRef((props, instanceRef) => {
     const getWidth = async () => {
       if (leftWrapper.current) {
         const leftRect = await getRectByTaro(leftWrapper.current);
-        setActionWidth((v) => ({ ...v, left: leftRect.width }));
+        leftRect && setActionWidth((v) => ({ ...v, left: leftRect.width }));
       }
       if (rightWrapper.current) {
         const rightRect = await getRectByTaro(rightWrapper.current);
-        setActionWidth((v) => ({ ...v, right: rightRect.width }));
+        rightRect && setActionWidth((v) => ({ ...v, right: rightRect.width }));
       }
     };
     nextTick(() => getWidth());
@@ -15029,11 +15069,11 @@ const Swipe = forwardRef((props, instanceRef) => {
     var _a;
     if (leftWrapper.current) {
       const leftRect = await getRectByTaro(leftWrapper.current);
-      setActionWidth((v) => ({ ...v, left: leftRect.width }));
+      leftRect && setActionWidth((v) => ({ ...v, left: leftRect.width }));
     }
     if (rightWrapper.current) {
       const rightRect = await getRectByTaro(rightWrapper.current);
-      setActionWidth((v) => ({ ...v, right: rightRect == null ? void 0 : rightRect.width }));
+      rightRect && setActionWidth((v) => ({ ...v, right: rightRect.width }));
     }
     if (!props.disabled) {
       startOffset.current = state.offset;
@@ -16295,6 +16335,7 @@ const Ellipsis = (props) => {
   const maxHeight = useRef(0);
   const [exceeded, setExceeded] = useState(false);
   const [expanded, setExpanded] = useState(false);
+  const [cacled, setCacled] = useState(false);
   const ellipsis = useRef({
     leading: "",
     tailing: ""
@@ -16324,6 +16365,9 @@ const Ellipsis = (props) => {
       getSymbolInfo();
       getReference();
     });
+    return () => {
+      setCacled(false);
+    };
   }, [content]);
   const getSymbolInfo = async () => {
     const refe = await getRectByTaro(symbolContain == null ? void 0 : symbolContain.current);
@@ -16375,6 +16419,7 @@ const Ellipsis = (props) => {
     const refe = await getRectByTaro(rootContain.current);
     if (refe.height <= maxHeight.current) {
       setExceeded(false);
+      setCacled(true);
     } else {
       const rowNum = Math.floor(
         content.length / (originHeight.current / lineH.current - 1)
@@ -16502,7 +16547,8 @@ const Ellipsis = (props) => {
         className: "nut-ellipsis-wordbreak",
         style: {
           width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`,
-          height: "20px",
+          minHeight: "20px",
+          height: cacled ? "auto" : "20px",
           overflow: "hidden"
         }
       },
@@ -16555,7 +16601,7 @@ const Ellipsis = (props) => {
       className: "nut-ellipsis-copy",
       ref: rootContain,
       id: `rootContain${refRandomId.current}`,
-      style: { width: `${widthRef}` }
+      style: { width: `${widthRef.current}` }
     },
     /* @__PURE__ */ React__default.createElement(View, null, contentCopy)
   ), /* @__PURE__ */ React__default.createElement(

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("@tarojs/taro"), require("@tarojs/components"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "@tarojs/taro", "@tarojs/components", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.nutui = global2.nutui || {}, global2.nutui.react = {}), global2.React, global2.Taro, global2.components, global2.ReactDOM));
 })(this, function(exports2, React, Taro, components, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react-taro v2.4.0 Fri Mar 08 2024 14:36:52 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.4.1 Fri Mar 15 2024 20:38:51 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -274,7 +274,7 @@
                 [`${prefixCls$2}-${size}`]: size,
                 [`${prefixCls$2}-${shape}`]: shape,
                 [`${prefixCls$2}-block`]: block,
-                [`${prefixCls$2}-disabled`]: disabled,
+                [`${prefixCls$2}-disabled`]: disabled || loading,
                 [`${prefixCls$2}-loading`]: loading
               },
               className
@@ -4946,19 +4946,33 @@
     max: 99,
     top: "4",
     right: "8",
-    color: ""
+    color: "",
+    fill: "solid"
   };
   const Badge = (props) => {
     var _a;
     const rtl = useRtl();
-    const { className, style, value, max, children, dot, top, right: right2, color } = {
+    const {
+      className,
+      style,
+      value,
+      max,
+      children,
+      dot,
+      top,
+      right: right2,
+      color,
+      fill
+    } = {
       ...defaultProps$1d,
       ...props
     };
     const classPrefix2 = "nut-badge";
-    const classes = classNames(classPrefix2, className);
+    const classes = classNames(classPrefix2, className, {
+      [`${classPrefix2}-${fill}`]: fill === "outline"
+    });
     function content() {
-      if (dot || typeof value === "object")
+      if (dot || typeof value === "object" || value === 0)
         return null;
       if (typeof value === "number" && typeof max === "number") {
         return max < value ? `${max}+` : `${value}`;
@@ -4990,7 +5004,18 @@
       style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
       const dir = rtl ? "left" : "right";
       style2[dir] = `${Number(right2) || parseFloat(String(right2)) || 0}px`;
-      style2.background = color;
+      if (color) {
+        if (fill === "outline") {
+          style2.color = color;
+          style2.background = "#fff";
+          if (!(color == null ? void 0 : color.includes("gradient"))) {
+            style2.border = `1px solid ${color}`;
+          }
+        } else {
+          style2.color = "#fff";
+          style2.background = color;
+        }
+      }
       return style2;
     };
     return /* @__PURE__ */ React.createElement("div", { className: classes, style }, isIcon() && /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}-icon` }, value), children, !isIcon() && /* @__PURE__ */ React.createElement("div", { className: contentClasses, style: getStyle() }, content()));
@@ -5188,6 +5213,7 @@
   };
   const classPrefix$k = "nut-tabs";
   const Tabs = (props) => {
+    const rtl = useRtl();
     const {
       activeColor,
       tabStyle,
@@ -5323,6 +5349,7 @@
               DEFAULT_PADDING
             );
             to = left2 - (navRectRef.current.width - titleRect.width) / 2;
+            to = rtl ? -to : to;
           }
           Taro.nextTick(() => {
             scrollWithAnimation.current = true;
@@ -5332,9 +5359,12 @@
       });
     };
     React.useEffect(() => {
-      const index = titles.current.findIndex((t2) => t2.value === value);
+      let index = titles.current.findIndex(
+        (t2) => String(t2.value) === String(value)
+      );
+      index = index < 0 ? 0 : index;
       setContentStyle({
-        transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
+        transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
         transitionDuration: `${duration}ms`
       });
       scrollIntoView(index);
@@ -5355,7 +5385,7 @@
         scrollLeft,
         scrollTop,
         showScrollbar: false,
-        scrollWithAnimation: scrollWithAnimation.current,
+        scrollWithAnimation: rtl && Taro.getEnv() !== "WEB" ? false : scrollWithAnimation.current,
         id: `nut-tabs-titles-${name || uuid}`,
         className: classesTitle,
         style: { ...tabStyle }
@@ -7482,7 +7512,7 @@
             change([day]);
           } else if (len === 1) {
             const t2 = compareDay(innerValue[0], day);
-            if (t2 === 0 || t2 === null || t2 === void 0) {
+            if (t2 === null || t2 === void 0) {
               change([]);
             } else if (t2 < 0) {
               change([innerValue[0], day]);
@@ -11590,6 +11620,8 @@
       touch.move(event);
       setDragStatus("draging");
       const rect = await getRectByTaro(root2.current);
+      if (!rect)
+        return;
       let delta = touch.deltaX.current;
       let total = rect.width;
       let diff = delta / total * scope();
@@ -13586,9 +13618,9 @@
   Drag.defaultProps = defaultProps$F;
   Drag.displayName = "NutDrag";
   const defaultStatus = {
-    empty: "https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png",
-    error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
-    network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
+    empty: "https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png",
+    error: "https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png",
+    network: "https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png"
   };
   const defaultProps$E = {
     ...ComponentDefaults,
@@ -13662,6 +13694,7 @@
   Empty.displayName = "NutEmpty";
   const defaultProps$D = {
     ...ComponentDefaults,
+    type: "default",
     hasMore: true,
     threshold: 40,
     target: "",
@@ -13672,6 +13705,7 @@
     const { locale } = useConfig$1();
     const {
       children,
+      type: type2,
       hasMore,
       threshold,
       target,
@@ -13696,7 +13730,7 @@
     const y = React.useRef(0);
     const refreshMaxH = React.useRef(0);
     const distance = React.useRef(0);
-    const classes = classNames(classPrefix$e, className);
+    const classes = classNames(classPrefix$e, className, `${classPrefix$e}-${type2}`);
     React.useEffect(() => {
       refreshMaxH.current = threshold;
       setTimeout(() => {
@@ -14650,6 +14684,7 @@
   const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
   const defaultProps$y = {
     ...ComponentDefaults,
+    type: "default",
     pullingText: "",
     canReleaseText: "",
     refreshingText: "",
@@ -14676,6 +14711,11 @@
         completeText: p.completeText || locale.pullToRefresh.completeText
       }
     };
+    const classes = classNames(
+      classPrefix2,
+      props.className,
+      `${classPrefix2}-${props.type}`
+    );
     const headHeight = props.headHeight;
     const threshold = props.threshold;
     const pullingRef = React.useRef(false);
@@ -14767,7 +14807,7 @@
     return /* @__PURE__ */ React.createElement(
       components.View,
       {
-        className: `${classPrefix2} ${props.className}`,
+        className: classes,
         style: props.style,
         onTouchStart: handleTouchStart,
         onTouchMove: handleTouchMove,
@@ -15013,11 +15053,11 @@
       const getWidth = async () => {
         if (leftWrapper.current) {
           const leftRect = await getRectByTaro(leftWrapper.current);
-          setActionWidth((v) => ({ ...v, left: leftRect.width }));
+          leftRect && setActionWidth((v) => ({ ...v, left: leftRect.width }));
         }
         if (rightWrapper.current) {
           const rightRect = await getRectByTaro(rightWrapper.current);
-          setActionWidth((v) => ({ ...v, right: rightRect.width }));
+          rightRect && setActionWidth((v) => ({ ...v, right: rightRect.width }));
         }
       };
       Taro.nextTick(() => getWidth());
@@ -15045,11 +15085,11 @@
       var _a;
       if (leftWrapper.current) {
         const leftRect = await getRectByTaro(leftWrapper.current);
-        setActionWidth((v) => ({ ...v, left: leftRect.width }));
+        leftRect && setActionWidth((v) => ({ ...v, left: leftRect.width }));
       }
       if (rightWrapper.current) {
         const rightRect = await getRectByTaro(rightWrapper.current);
-        setActionWidth((v) => ({ ...v, right: rightRect == null ? void 0 : rightRect.width }));
+        rightRect && setActionWidth((v) => ({ ...v, right: rightRect.width }));
       }
       if (!props.disabled) {
         startOffset.current = state.offset;
@@ -16311,6 +16351,7 @@
     const maxHeight = React.useRef(0);
     const [exceeded, setExceeded] = React.useState(false);
     const [expanded, setExpanded] = React.useState(false);
+    const [cacled, setCacled] = React.useState(false);
     const ellipsis = React.useRef({
       leading: "",
       tailing: ""
@@ -16340,6 +16381,9 @@
         getSymbolInfo();
         getReference();
       });
+      return () => {
+        setCacled(false);
+      };
     }, [content]);
     const getSymbolInfo = async () => {
       const refe = await getRectByTaro(symbolContain == null ? void 0 : symbolContain.current);
@@ -16391,6 +16435,7 @@
       const refe = await getRectByTaro(rootContain.current);
       if (refe.height <= maxHeight.current) {
         setExceeded(false);
+        setCacled(true);
       } else {
         const rowNum = Math.floor(
           content.length / (originHeight.current / lineH.current - 1)
@@ -16518,7 +16563,8 @@
           className: "nut-ellipsis-wordbreak",
           style: {
             width: `${!Number.isNaN(Number(width)) ? `${width}px` : "auto"}`,
-            height: "20px",
+            minHeight: "20px",
+            height: cacled ? "auto" : "20px",
             overflow: "hidden"
           }
         },
@@ -16571,7 +16617,7 @@
         className: "nut-ellipsis-copy",
         ref: rootContain,
         id: `rootContain${refRandomId.current}`,
-        style: { width: `${widthRef}` }
+        style: { width: `${widthRef.current}` }
       },
       /* @__PURE__ */ React.createElement(components.View, null, contentCopy)
     ), /* @__PURE__ */ React.createElement(

package/dist/packages/badge/badge.scss

@@ -59,6 +59,14 @@
     border-radius: $badge-dot-width;
     padding: 0;
   }
+
+  &-outline {
+    .nut-badge-content {
+      background: $color-primary-text;
+      border: 1px solid $color-primary;
+      color: $color-primary;
+    }
+  }
 }
 
 [dir='rtl'] .nut-badge,

package/dist/packages/button/button.scss

@@ -13,7 +13,7 @@
   font-weight: $button-default-font-weight;
   text-align: center;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: $button-transition;
   -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
@@ -59,6 +59,11 @@
     align-items: center;
     justify-content: center;
     background: initial;
+    .nut-icon {
+      font-size: $button-default-font-size;
+      width: $button-default-font-size;
+      height: $button-default-font-size;
+    }
   }
 
   &-loading,
@@ -78,7 +83,7 @@
     border: $button-border-width solid $button-default-border-color;
 
     &.nut-button-disabled {
-      color: $color-text-help;
+      color: $button-default-disabled-color;
       background: transparent;
     }
 
@@ -86,7 +91,7 @@
       background: transparent;
 
       &.nut-button-disabled {
-        color: $color-text-help;
+        color: $button-default-disabled-color;
       }
     }
 
@@ -95,7 +100,7 @@
       background: transparent;
 
       &.nut-button-disabled {
-        color: $color-text-help;
+        color: $button-default-disabled-color;
         border-color: $button-default-disabled;
       }
     }
@@ -105,22 +110,54 @@
     padding: $button-normal-padding;
   }
 
+  &-xlarge {
+    height: $button-xlarge-height;
+    padding: $button-xlarge-padding;
+    font-size: $button-xlarge-font-size;
+    font-weight: $button-large-font-weight;
+
+    .nut-icon {
+      font-size: $button-xlarge-font-size;
+      width: $button-xlarge-font-size;
+      height: $button-xlarge-font-size;
+    }
+  }
+
   &-large {
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
+    font-weight: $button-large-font-weight;
+
+    .nut-icon {
+      font-size: $button-large-font-size;
+      width: $button-large-font-size;
+      height: $button-large-font-size;
+    }
   }
 
   &-small {
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+
+    .nut-icon {
+      font-size: $button-small-font-size;
+      width: $button-small-font-size;
+      height: $button-small-font-size;
+    }
   }
 
   &-mini {
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
+
+    .nut-icon {
+      font-size: $button-mini-font-size;
+      width: $button-mini-font-size;
+      height: $button-mini-font-size;
+    }
   }
 
   &-primary {
@@ -290,7 +327,7 @@
     border: $button-border-width solid transparent;
 
     &.nut-button-disabled {
-      color: #ffffff;
+      color: $button-default-disabled-color;
       background: $button-default-disabled;
     }
   }
@@ -308,7 +345,6 @@
 
   &-disabled {
     cursor: not-allowed;
-    font-weight: 400;
     color: #ffffff;
     background: $button-default-disabled;
     border-color: $button-default-disabled;
@@ -321,6 +357,19 @@
 
   &-round {
     border-radius: $button-border-radius;
+
+    &.nut-button-xlarge,
+    &.nut-button-large {
+      border-radius: $button-large-border-radius;
+    }
+
+    &.nut-button-small {
+      border-radius: $button-small-border-radius;
+    }
+
+    &.nut-button-mini {
+      border-radius: $button-mini-border-radius;
+    }
   }
 
   &-square {