diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index a736beb849..dc39cbfee2 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -102,7 +102,10 @@
   &-round {
     border-radius: $button-border-radius;
 
-    &-xlarge,
+    &-xlarge {
+      border-radius: $button-xlarge-border-radius;
+    }
+
     &-large {
       border-radius: $button-large-border-radius;
     }
@@ -178,7 +181,7 @@
     padding: $button-large-padding;
     font-size: $button-large-font-size;
     font-weight: $button-large-font-weight;
-    border-radius: $radius-base;
+    border-radius: $radius-s;
 
     .nut-button-text {
       margin-left: $button-xlarge-text-icon-margin;
@@ -203,7 +206,7 @@
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
-    border-radius: $radius-s;
+    border-radius: $radius-xs;
 
     .nut-icon {
       font-size: $button-small-font-size;
@@ -220,7 +223,7 @@
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
-    border-radius: $radius-s;
+    border-radius: $radius-xs;
 
     .nut-icon {
       font-size: $button-mini-font-size;
@@ -246,6 +249,11 @@
       background: $button-primary-background-color;
       color: $button-primary-color;
       border-color: transparent;
+      font-weight: $font-weight-bold;
+      &.nut-button-small,
+      &.nut-button-mini {
+        font-weight: $font-weight;
+      }
     }
 
     &-disabled,
@@ -283,6 +291,9 @@
       }
     }
   }
+  &-primary.nut-button-solid.nut-button-normal {
+    font-weight: $font-weight-bold;
+  }
 
   &-success {
     color: $button-success-color;
diff --git a/src/packages/button/demos/h5/demo8.tsx b/src/packages/button/demos/h5/demo8.tsx
index 6c184ffffd..e8b1f1ed58 100644
--- a/src/packages/button/demos/h5/demo8.tsx
+++ b/src/packages/button/demos/h5/demo8.tsx
@@ -3,11 +3,9 @@ import { Button } from '@nutui/nutui-react'
 
 const Demo8 = () => {
   return (
-    <>
-      <Button block type="primary">
-        Block Button
-      </Button>
-    </>
+    <Button block type="primary">
+      Block Button
+    </Button>
   )
 }
 export default Demo8
diff --git a/src/packages/button/demos/taro/demo10.tsx b/src/packages/button/demos/taro/demo10.tsx
index b5dcef4d2c..ae1c963e03 100644
--- a/src/packages/button/demos/taro/demo10.tsx
+++ b/src/packages/button/demos/taro/demo10.tsx
@@ -1,23 +1,13 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const App = () => {
-  const marginStyle = harmonyAndRn()
-    ? {
-        width: pxTransform(120),
-        marginRight: pxTransform(8),
-        marginTop: pxTransform(8),
-        marginLeft: pxTransform(8),
-        marginBottom: pxTransform(8),
-      }
-    : {
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
-      }
+  const marginStyle = {
+    width: harmony() ? 120 : 'auto',
+    margin: 8,
+  }
+
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button color="blue" style={marginStyle}>
diff --git a/src/packages/button/demos/taro/demo2.tsx b/src/packages/button/demos/taro/demo2.tsx
index eb826b52f0..f138378b78 100644
--- a/src/packages/button/demos/taro/demo2.tsx
+++ b/src/packages/button/demos/taro/demo2.tsx
@@ -1,23 +1,10 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { harmony } from '@/utils/platform-taro'
-import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
-  const marginStyle = harmony()
-    ? {
-        width: pxTransform(90),
-        marginRight: pxTransform(8),
-        marginTop: pxTransform(8),
-        marginLeft: pxTransform(8),
-        marginBottom: pxTransform(8),
-      }
-    : {
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
-      }
+  const marginStyle = {
+    margin: 8,
+  }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button type="primary" style={marginStyle}>
diff --git a/src/packages/button/demos/taro/demo3.tsx b/src/packages/button/demos/taro/demo3.tsx
index 531558e633..cf0c58be8b 100644
--- a/src/packages/button/demos/taro/demo3.tsx
+++ b/src/packages/button/demos/taro/demo3.tsx
@@ -1,14 +1,9 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
   const marginStyle = {
-    width: pxTransform(80),
-    marginRight: pxTransform(8),
-    marginTop: pxTransform(8),
-    marginLeft: pxTransform(8),
-    marginBottom: pxTransform(8),
+    margin: 8,
   }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
diff --git a/src/packages/button/demos/taro/demo4.tsx b/src/packages/button/demos/taro/demo4.tsx
index 3fa3641dd6..b5b01ab2fd 100644
--- a/src/packages/button/demos/taro/demo4.tsx
+++ b/src/packages/button/demos/taro/demo4.tsx
@@ -1,14 +1,12 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
 import { Plus, Star } from '@nutui/icons-react-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const Demo4 = () => {
   const marginStyle = {
-    marginRight: pxTransform(8),
-    marginTop: pxTransform(8),
-    marginLeft: pxTransform(8),
-    marginBottom: pxTransform(8),
+    width: harmony() ? 140 : 'auto',
+    margin: 8,
   }
   return (
     <>
@@ -44,6 +42,7 @@ const Demo4 = () => {
           rightIcon={<Star />}
           style={{
             margin: 8,
+            width: harmony() ? 140 : 'auto',
             backgroundColor: `var(--nutui-color-primary-light-pressed)`,
             borderColor: `var(--nutui-color-primary)`,
             color: `var(--nutui-color-primary)`,
@@ -58,6 +57,7 @@ const Demo4 = () => {
           rightIcon={<Star />}
           style={{
             margin: 8,
+            width: harmony() ? 140 : 'auto',
             backgroundColor: `var(--nutui-gray-3)`,
             color: `var(--nutui-gray-7)`,
           }}
@@ -71,6 +71,7 @@ const Demo4 = () => {
           rightIcon={<Star />}
           style={{
             margin: 8,
+            width: harmony() ? 140 : 'auto',
             backgroundColor: `var(--nutui-gray-1)`,
             color: `var(--nutui-gray-7)`,
           }}
@@ -81,9 +82,7 @@ const Demo4 = () => {
           type="default"
           icon={<Star />}
           rightIcon={<Star />}
-          style={{
-            margin: 8,
-          }}
+          style={marginStyle}
         >
           Button
         </Button>
@@ -91,20 +90,26 @@ const Demo4 = () => {
           shape="square"
           fill="outline"
           type="primary"
-          icon={<Plus />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           fill="outline"
           type="primary"
-          icon={<Plus />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           type="primary"
           fill="dashed"
-          icon={<Plus />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           shape="round"
diff --git a/src/packages/button/demos/taro/demo5.tsx b/src/packages/button/demos/taro/demo5.tsx
index fb5e4bb308..95583e13b9 100644
--- a/src/packages/button/demos/taro/demo5.tsx
+++ b/src/packages/button/demos/taro/demo5.tsx
@@ -1,14 +1,12 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
 import { Plus, Star } from '@nutui/icons-react-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const Demo5 = () => {
   const marginStyle = {
-    marginRight: pxTransform(8),
-    marginTop: pxTransform(8),
-    marginLeft: pxTransform(8),
-    marginBottom: pxTransform(8),
+    width: harmony() ? 140 : 'auto',
+    margin: 8,
   }
   return (
     <>
@@ -59,6 +57,7 @@ const Demo5 = () => {
           rightIcon={<Star />}
           style={{
             margin: 8,
+            width: harmony() ? 140 : 'auto',
             backgroundColor: `var(--nutui-gray-3)`,
             color: `var(--nutui-gray-5)`,
           }}
@@ -73,6 +72,7 @@ const Demo5 = () => {
           rightIcon={<Star />}
           style={{
             margin: 8,
+            width: harmony() ? 140 : 'auto',
             backgroundColor: `var(--nutui-gray-1)`,
             color: `var(--nutui-gray-5)`,
           }}
@@ -83,9 +83,7 @@ const Demo5 = () => {
           disabled
           icon={<Star />}
           rightIcon={<Star />}
-          style={{
-            margin: 8,
-          }}
+          style={marginStyle}
         >
           Disabled
         </Button>
@@ -94,21 +92,27 @@ const Demo5 = () => {
           shape="square"
           fill="outline"
           type="primary"
-          icon={<Plus size="20" />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           disabled
           type="primary"
-          icon={<Plus size="20" />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           disabled
           type="primary"
           fill="dashed"
-          icon={<Plus />}
-          style={marginStyle}
+          icon={<Plus size={10} />}
+          style={{
+            margin: 8,
+          }}
         />
         <Button
           disabled
diff --git a/src/packages/button/demos/taro/demo6.tsx b/src/packages/button/demos/taro/demo6.tsx
index 26b528738a..331e16ab77 100644
--- a/src/packages/button/demos/taro/demo6.tsx
+++ b/src/packages/button/demos/taro/demo6.tsx
@@ -1,23 +1,12 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { harmonyAndRn, rn } from '@/utils/platform-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const Demo6 = () => {
-  const marginStyle = harmonyAndRn()
-    ? {
-        width: pxTransform(rn() ? 120 : 150),
-        marginRight: pxTransform(8),
-        marginTop: pxTransform(8),
-        marginLeft: pxTransform(8),
-        marginBottom: pxTransform(8),
-      }
-    : {
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
-      }
+  const marginStyle = {
+    width: harmony() ? 120 : 'auto',
+    margin: 8,
+  }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button shape="square" type="primary" style={marginStyle}>
diff --git a/src/packages/button/demos/taro/demo7.tsx b/src/packages/button/demos/taro/demo7.tsx
index d8c347b735..ced8f894ac 100644
--- a/src/packages/button/demos/taro/demo7.tsx
+++ b/src/packages/button/demos/taro/demo7.tsx
@@ -1,16 +1,12 @@
 import React, { useState } from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { rn } from '@/utils/platform-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const Demo7 = () => {
   const [loading, setLoading] = useState(false)
   const marginStyle = {
-    width: pxTransform(rn() ? 90 : 120),
-    marginRight: pxTransform(8),
-    marginTop: pxTransform(8),
-    marginLeft: pxTransform(8),
-    marginBottom: pxTransform(8),
+    width: harmony() ? 120 : 'auto',
+    margin: 8,
   }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
diff --git a/src/packages/button/demos/taro/demo8.tsx b/src/packages/button/demos/taro/demo8.tsx
index 055d721053..5139cf8e24 100644
--- a/src/packages/button/demos/taro/demo8.tsx
+++ b/src/packages/button/demos/taro/demo8.tsx
@@ -1,38 +1,13 @@
 import React from 'react'
 import { Button, Cell } from '@nutui/nutui-react-taro'
-import { harmonyAndRn } from '@/utils/platform-taro'
-import pxTransform from '@/utils/px-transform'
+import { harmony } from '@/utils/platform-taro'
 
 const Demo8 = () => {
-  const marginStyle = harmonyAndRn()
-    ? {
-        width: pxTransform(90),
-        marginRight: pxTransform(8),
-        marginTop: pxTransform(8),
-        marginLeft: pxTransform(8),
-        marginBottom: pxTransform(8),
-      }
-    : {
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
-      }
+  const marginStyle = {
+    width: harmony() ? 120 : 'auto',
+    margin: 8,
+  }
 
-  const marginStyleXL = harmonyAndRn()
-    ? {
-        width: pxTransform(140),
-        marginRight: pxTransform(8),
-        marginTop: pxTransform(8),
-        marginLeft: pxTransform(8),
-        marginBottom: pxTransform(8),
-      }
-    : {
-        marginRight: 8,
-        marginTop: 8,
-        marginLeft: 8,
-        marginBottom: 8,
-      }
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
       <Button type="primary" style={marginStyle}>
@@ -48,7 +23,7 @@ const Demo8 = () => {
       <Button size="large" type="primary" style={marginStyle}>
         Large
       </Button>
-      <Button size="xlarge" type="primary" style={marginStyleXL}>
+      <Button size="xlarge" type="primary" style={marginStyle}>
         XLarge
       </Button>
     </Cell>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 2050922e65..43cc125bd3 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -172,7 +172,7 @@ $button-square-border-radius: var(
   --nutui-button-square-border-radius,
   0
 ) !default;
-$button-border-radius: var(--nutui-button-border-radius, 8px) !default;
+$button-border-radius: var(--nutui-button-border-radius, $radius-s) !default;
 $button-border-width: var(--nutui-button-border-width, 1px) !default;
 $button-normal-padding: var(--nutui-button-normal-padding, 0px 12px) !default;
 $button-default-height: var(--nutui-button-default-height, 32px) !default;
@@ -196,7 +196,7 @@ $button-default-disabled-color: var(
 $button-default-padding: var(--nutui-button-default-padding, 0px 12px) !default;
 $button-default-font-size: var(
   --nutui-button-default-font-size,
-  $font-size-s
+  $font-size-base
 ) !default;
 $button-default-font-weight: var(
   --nutui-button-default-font-weight,
@@ -209,12 +209,20 @@ $button-xlarge-font-size: var(
   --nutui-button-xlarge-font-size,
   $font-size-xl
 ) !default;
+$button-xlarge-text-icon-margin: var(
+  --nutui-button-xlarge-text-icon-margin,
+  6px
+) !default;
+$button-xlarge-border-radius: var(
+  --nutui-button-xlarge-border-radius,
+  $radius-base
+) !default;
 
 $button-large-height: var(--nutui-button-large-height, 40px) !default;
 $button-large-padding: var(--nutui-button-large-padding, 0px 16px) !default;
 $button-large-font-size: var(
   --nutui-button-large-font-size,
-  $font-size-base
+  $font-size-l
 ) !default;
 $button-large-font-weight: var(
   --nutui-button-large-font-weight,
@@ -222,7 +230,7 @@ $button-large-font-weight: var(
 ) !default;
 $button-large-border-radius: var(
   --nutui-button-large-border-radius,
-  12px
+  $radius-s
 ) !default;
 
 $button-small-font-size: var(
@@ -233,7 +241,7 @@ $button-small-padding: var(--nutui-button-small-padding, 0px 8px) !default;
 $button-small-height: var(--nutui-button-small-height, 28px) !default;
 $button-small-border-radius: var(
   --nutui-button-small-border-radius,
-  8px
+  $radius-xs
 ) !default;
 
 $button-mini-padding: var(--nutui-button-mini-padding, 0px 8px) !default;
@@ -244,7 +252,7 @@ $button-mini-font-size: var(
 ) !default;
 $button-mini-border-radius: var(
   --nutui-button-mini-border-radius,
-  6px
+  $radius-xs
 ) !default;
 
 $button-primary-color: var(
@@ -334,10 +342,6 @@ $button-danger-disabled: var(
   $color-danger-disabled
 ) !default;
 
-$button-xlarge-text-icon-margin: var(
-  --nutui-button-xlarge-text-icon-margin,
-  6px
-) !default;
 $button-text-icon-margin: var(--nutui-button-text-icon-margin, 4px) !default;
 
 // cell（✅）