@arco-design/mobile-react 2.19.1-941e02b.7 → 2.20.0

package/esm/button/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState, forwardRef, useRef, useImperativeHandle } from 'react';
+import React, { useState, forwardRef, useRef, useImperativeHandle, useContext } from 'react';
 import { cls } from '@arco-design/mobile-utils';
-import { ContextLayout } from '../context-provider';
+import { GlobalContext } from '../context-provider';
 import Loading from '../loading';
 import { useSystem } from '../_helpers';
 import { useCustomColor } from './hooks';
@@ -15,6 +15,8 @@ import { useCustomColor } from './hooks';
  * @name_en Button
  */
 var Button = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _ref, _cls;
+
   var _useState = useState(false),
       isActive = _useState[0],
       setActive = _useState[1];
@@ -30,6 +32,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       loading = _props$loading === void 0 ? false : _props$loading,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
+      _props$disableWhenLoa = props.disableWhenLoading,
+      disableWhenLoading = _props$disableWhenLoa === void 0 ? true : _props$disableWhenLoa,
       _props$shape = props.shape,
       shape = _props$shape === void 0 ? 'semi' : _props$shape,
       _props$halfBorder = props.halfBorder,
@@ -50,8 +54,15 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
       children = _props$children === void 0 ? null : _props$children,
       loadingIcon = props.loadingIcon,
       onClick = props.onClick,
-      onClickDisabled = props.onClickDisabled;
+      onClickDisabled = props.onClickDisabled,
+      _props$coverIconWhenL = props.coverIconWhenLoading,
+      coverIconWhenLoading = _props$coverIconWhenL === void 0 ? true : _props$coverIconWhenL;
   var domRef = useRef(null);
+
+  var _useContext = useContext(GlobalContext),
+      prefixCls = _useContext.prefixCls;
+
+  var prefix = prefixCls + "-button";
   useImperativeHandle(ref, function () {
     return {
       dom: domRef.current
@@ -63,7 +74,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     bgColor: bgColor,
     borderColor: borderColor,
     isActive: isActive,
-    disabled: disabled
+    disabled: disabled,
+    halfBorder: halfBorder
   }),
       customColorClass = _useCustomColor.customColorClass,
       customColorStyle = _useCustomColor.customColorStyle;
@@ -78,36 +90,31 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     setActive(false);
   };
 
-  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
-    var prefixCls = _ref.prefixCls;
-    return /*#__PURE__*/React.createElement("button", {
-      type: "button",
-      ref: domRef,
-      style: _extends({}, customColorStyle, style),
-      className: cls.apply(void 0, [prefixCls + "-button", className, "type-" + type, "size-" + size, "is-" + shape, system, {
-        inline: inline,
-        disabled: disabled,
-        loading: loading,
-        active: isActive,
-        'half-border': halfBorder
-      }].concat(customColorClass)),
-      onTouchStart: handleTouchStart,
-      onTouchEnd: handleTouchEnd,
-      onTouchCancel: handleTouchEnd,
-      onMouseDown: handleTouchStart,
-      onMouseUp: handleTouchEnd,
-      onClick: disabled ? onClickDisabled : onClick
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "btn-icon"
-    }, icon, loading && (loadingIcon === void 0 ? /*#__PURE__*/React.createElement(Loading, {
-      className: "loading-icon",
-      radius: 6,
-      type: "circle"
-    }) : loadingIcon)), (!loading || loading && showTextWhenLoading) && children ? /*#__PURE__*/React.createElement("div", {
-      className: cls('btn-text', {
-        'has-icon': loading || icon
-      })
-    }, children) : null);
-  });
+  var renderIcon = function renderIcon() {
+    if (coverIconWhenLoading) {
+      return loading ? null : icon;
+    }
+
+    return icon;
+  };
+
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    ref: domRef,
+    style: _extends({}, customColorStyle, style),
+    className: cls.apply(void 0, [prefix, prefix + "-type-" + type + " type-" + type, prefix + "-size-" + size + " " + prefix + "-size-" + size + "-is-" + shape + " size-" + size, className, "is-" + shape, system, (_ref = {}, _ref[prefix + "-inline inline"] = inline, _ref[prefix + "-type-" + type + "-disabled disabled"] = disabled, _ref.loading = loading, _ref[prefix + "-type-" + type + "-active active"] = isActive, _ref)].concat(customColorClass)),
+    onTouchStart: handleTouchStart,
+    onTouchEnd: handleTouchEnd,
+    onTouchCancel: handleTouchEnd,
+    onClick: disabled || loading && disableWhenLoading ? onClickDisabled : onClick
+  }, icon || loading ? /*#__PURE__*/React.createElement("div", {
+    className: prefix + "-icon btn-icon"
+  }, renderIcon(), loading && (loadingIcon === void 0 ? /*#__PURE__*/React.createElement(Loading, {
+    className: prefix + "-loading-icon loading-icon",
+    radius: 6,
+    type: "circle"
+  }) : loadingIcon)) : null, (!loading || loading && showTextWhenLoading) && children ? /*#__PURE__*/React.createElement("div", {
+    className: cls(prefix + "-text", prefix + "-text-" + system, 'btn-text', (_cls = {}, _cls[prefix + "-text-has-icon has-icon"] = loading || icon, _cls))
+  }, children) : null);
 });
 export default Button;

package/esm/button/style/css/index.css

@@ -6,8 +6,8 @@
   display: block;
   width: 100%;
   box-sizing: border-box;
+  line-height:  1.2 ;
   border-radius:  2PX ;
-  border: 1PX solid #165dff ;
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
@@ -18,414 +18,180 @@
   user-select: none;
   /* Non-prefixed version, currently*/
 }
-.arco-button.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.half-border:not(.has-custom-border),
-.arco-button.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.inline {
+.arco-button-inline {
   width: auto;
   display: inline-block;
 }
-.arco-button.type-ghost {
-  border: 1PX solid transparent ;
+.arco-button-type-ghost {
   background:  transparent ;
   color:  #165dff ;
 }
-.arco-button.type-ghost.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX transparent inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX transparent inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid transparent;
-}
-.arco-button.type-ghost .bg-color-with-config {
+.arco-button-type-ghost .bg-color-with-config {
   background: #165dff;
 }
-.arco-button.type-ghost .stop-color-with-config {
+.arco-button-type-ghost .stop-color-with-config {
   stop-color: #165dff;
 }
-.arco-button.type-ghost .fill-color-with-config {
+.arco-button-type-ghost .fill-color-with-config {
   fill: #165dff;
 }
-.arco-button.type-ghost .stroke-color-with-config {
+.arco-button-type-ghost .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button.type-ghost.disabled {
+.arco-button-type-ghost-disabled {
   background:  transparent ;
   color:  #94bfff ;
 }
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border-width: 0;
-  box-shadow: none;
-}
-.arco-button.type-ghost.active {
+.arco-button-type-ghost-active {
   background:  #e8f3ff ;
-  border: 1PX solid #e8f3ff ;
-}
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #e8f3ff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #e8f3ff inset;
-  }
-}
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #e8f3ff;
-}
-.arco-button.type-ghost,
-.arco-button.type-ghost.active {
-  border: 1PX solid #165dff ;
 }
-.arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border: 1PX solid #94bfff ;
-}
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
-  }
-}
-.ios .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #94bfff;
-}
-.arco-button.type-default {
-  border: 1PX solid #E8F3FF ;
+.arco-button-type-default {
   background:  #E8F3FF ;
   color:  #165dff ;
 }
-.arco-button.type-default.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #E8F3FF inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-default.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #E8F3FF inset;
-  }
-}
-.ios .arco-button.type-default.half-border:not(.has-custom-border),
-.arco-button.type-default.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #E8F3FF;
-}
-.arco-button.type-default .bg-color-with-config {
+.arco-button-type-default .bg-color-with-config {
   background: #165dff;
 }
-.arco-button.type-default .stop-color-with-config {
+.arco-button-type-default .stop-color-with-config {
   stop-color: #165dff;
 }
-.arco-button.type-default .fill-color-with-config {
+.arco-button-type-default .fill-color-with-config {
   fill: #165dff;
 }
-.arco-button.type-default .stroke-color-with-config {
+.arco-button-type-default .stroke-color-with-config {
   stroke: #165dff;
 }
-.arco-button.type-default.disabled {
+.arco-button-type-default-disabled {
   background:  #E8F3FF ;
   color:  #94bfff ;
 }
-.arco-button.type-default.disabled.ios,
-.arco-button.type-default.disabled.android {
-  border-width: 0;
-  box-shadow: none;
-}
-.arco-button.type-default.active {
+.arco-button-type-default-active {
   background:  #94bfff ;
-  border: 1PX solid #94bfff ;
-}
-.arco-button.type-default.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-default.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
-  }
-}
-.ios .arco-button.type-default.active.half-border:not(.has-custom-border),
-.arco-button.type-default.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #94bfff;
-}
-.arco-button.type-ghost,
-.arco-button.type-ghost.active {
-  border: 1PX solid #165dff ;
-}
-.arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border: 1PX solid #94bfff ;
-}
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
-  }
-}
-.ios .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #94bfff;
-}
-.arco-button.type-primary {
-  border: 1PX solid #165dff ;
+.arco-button-type-primary {
   background:  #165dff ;
   color:  #fff ;
 }
-.arco-button.type-primary.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-primary.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-primary.half-border:not(.has-custom-border),
-.arco-button.type-primary.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
-}
-.arco-button.type-primary .bg-color-with-config {
+.arco-button-type-primary .bg-color-with-config {
   background: #fff;
 }
-.arco-button.type-primary .stop-color-with-config {
+.arco-button-type-primary .stop-color-with-config {
   stop-color: #fff;
 }
-.arco-button.type-primary .fill-color-with-config {
+.arco-button-type-primary .fill-color-with-config {
   fill: #fff;
 }
-.arco-button.type-primary .stroke-color-with-config {
+.arco-button-type-primary .stroke-color-with-config {
   stroke: #fff;
 }
-.arco-button.type-primary.disabled {
+.arco-button-type-primary-disabled {
   background:  #94bfff ;
   color:  #E8F3FF ;
 }
-.arco-button.type-primary.disabled.ios,
-.arco-button.type-primary.disabled.android {
-  border-width: 0;
-  box-shadow: none;
-}
-.arco-button.type-primary.active {
+.arco-button-type-primary-active {
   background:  #0E42D2 ;
-  border: 1PX solid #0E42D2 ;
-}
-.arco-button.type-primary.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #0E42D2 inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-primary.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #0E42D2 inset;
-  }
-}
-.ios .arco-button.type-primary.active.half-border:not(.has-custom-border),
-.arco-button.type-primary.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #0E42D2;
-}
-.arco-button.type-ghost,
-.arco-button.type-ghost.active {
-  border: 1PX solid #165dff ;
-}
-.arco-button.type-ghost.half-border:not(.has-custom-border),
-.arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-  border-width: 0;
-  box-shadow: 0 0 0 1PX #165dff inset;
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.active.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #165dff inset;
-  }
-}
-.ios .arco-button.type-ghost.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.active.half-border:not(.has-custom-border),
-.arco-button.type-ghost.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.active.half-border:not(.has-custom-border).ios {
-  box-shadow: none;
-  border: 0.5PX solid #165dff;
 }
-.arco-button.type-ghost.disabled.ios,
-.arco-button.type-ghost.disabled.android {
-  border: 1PX solid #94bfff ;
+.arco-button-type-ghost {
+  border: 1PX solid currentColor;
 }
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
+.arco-button-type-ghost.half-border {
   border-width: 0;
-  box-shadow: 0 0 0 1PX #94bfff inset;
+  box-shadow: 0 0 0 1PX currentColor inset;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-  .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-  .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border) {
-    box-shadow: 0 0 0 0.5PX #94bfff inset;
+  .arco-button-type-ghost.half-border {
+    box-shadow: 0 0 0 0.5PX currentColor inset;
   }
 }
-.ios .arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border),
-.ios .arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border),
-.arco-button.type-ghost.disabled.ios.half-border:not(.has-custom-border).ios,
-.arco-button.type-ghost.disabled.android.half-border:not(.has-custom-border).ios {
+.ios .arco-button-type-ghost.half-border,
+.arco-button-type-ghost.half-border.ios {
   box-shadow: none;
-  border: 0.5PX solid #94bfff;
+  border: 0.5PX solid currentColor;
 }
-.arco-button.size-mini {
+.arco-button-size-mini {
   padding:  0 0.16rem ;
   height:  0.48rem ;
 }
-.arco-button.size-mini.is-round {
+.arco-button-size-mini-is-round {
   border-radius:  0.48rem ;
 }
-.arco-button.size-mini.is-square {
+.arco-button-size-mini-is-square {
   border-radius: 0;
 }
-.arco-button.size-mini .btn-icon,
-.arco-button.size-mini i,
-.arco-button.size-mini .btn-text,
-.arco-button.size-mini svg {
+.arco-button-size-mini .arco-button-icon,
+.arco-button-size-mini i,
+.arco-button-size-mini .arco-button-text,
+.arco-button-size-mini svg {
   font-size:  0.24rem ;
 }
-.arco-button.size-small {
+.arco-button-size-small {
   padding:  0 0.16rem ;
   height:  0.56rem ;
 }
-.arco-button.size-small.is-round {
+.arco-button-size-small-is-round {
   border-radius:  0.56rem ;
 }
-.arco-button.size-small.is-square {
+.arco-button-size-small-is-square {
   border-radius: 0;
 }
-.arco-button.size-small .btn-icon,
-.arco-button.size-small i,
-.arco-button.size-small .btn-text,
-.arco-button.size-small svg {
+.arco-button-size-small .arco-button-icon,
+.arco-button-size-small i,
+.arco-button-size-small .arco-button-text,
+.arco-button-size-small svg {
   font-size:  0.28rem ;
 }
-.arco-button.size-medium {
+.arco-button-size-medium {
   padding:  0 0.32rem ;
   height:  0.64rem ;
 }
-.arco-button.size-medium.is-round {
+.arco-button-size-medium-is-round {
   border-radius:  0.64rem ;
 }
-.arco-button.size-medium.is-square {
+.arco-button-size-medium-is-square {
   border-radius: 0;
 }
-.arco-button.size-medium .btn-icon,
-.arco-button.size-medium i,
-.arco-button.size-medium .btn-text,
-.arco-button.size-medium svg {
+.arco-button-size-medium .arco-button-icon,
+.arco-button-size-medium i,
+.arco-button-size-medium .arco-button-text,
+.arco-button-size-medium svg {
   font-size:  0.28rem ;
 }
-.arco-button.size-large {
+.arco-button-size-large {
   padding:  0 0.32rem ;
   height:  0.72rem ;
 }
-.arco-button.size-large.is-round {
+.arco-button-size-large-is-round {
   border-radius:  0.72rem ;
 }
-.arco-button.size-large.is-square {
+.arco-button-size-large-is-square {
   border-radius: 0;
 }
-.arco-button.size-large .btn-icon,
-.arco-button.size-large i,
-.arco-button.size-large .btn-text,
-.arco-button.size-large svg {
+.arco-button-size-large .arco-button-icon,
+.arco-button-size-large i,
+.arco-button-size-large .arco-button-text,
+.arco-button-size-large svg {
   font-size:  0.3rem ;
 }
-.arco-button.size-huge {
+.arco-button-size-huge {
   padding:  0 0.32rem ;
   height:  0.88rem ;
 }
-.arco-button.size-huge.is-round {
+.arco-button-size-huge-is-round {
   border-radius:  0.88rem ;
 }
-.arco-button.size-huge.is-square {
+.arco-button-size-huge-is-square {
   border-radius: 0;
 }
-.arco-button.size-huge .btn-icon,
-.arco-button.size-huge i,
-.arco-button.size-huge .btn-text,
-.arco-button.size-huge svg {
+.arco-button-size-huge .arco-button-icon,
+.arco-button-size-huge i,
+.arco-button-size-huge .arco-button-text,
+.arco-button-size-huge svg {
   font-size:  0.32rem ;
 }
-.arco-button.android .btn-text {
+.arco-button-text-android {
   padding-top: 0.04rem;
 }
-.arco-button .btn-icon {
+.arco-button-icon {
   vertical-align: middle;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -437,18 +203,17 @@
   -webkit-justify-content: center;
           justify-content: center;
 }
-.arco-button .btn-text {
-  font-size: 0.3rem;
+.arco-button-text {
   display: inline-block;
   vertical-align: middle;
 }
-.arco-button .btn-text.has-icon {
-  margin-left: 0.08rem;
+.arco-button-text-has-icon {
+  margin-left:  0.08rem ;
 }
-.arco-button .loading-icon {
+.arco-button-loading-icon {
   display: inline-block;
   vertical-align: middle;
 }
-.arco-button .loading-icon + .btn-text {
-  margin-left: 0.16rem;
+.arco-button.has-custom-border {
+  border: 1PX solid;
 }