From 455ac0be03d58b3dcb0f3e8060c2751f0494f3ab Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Thu, 27 Mar 2025 15:28:28 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20popover=20=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E6=B6=88=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/popover/demos/h5/demo4.tsx | 22 ++++-----
 src/packages/popover/popover.scss       | 64 ++++++++++++-------------
 src/packages/popover/popover.tsx        | 30 +++++-------
 src/packages/popup/popup.scss           |  6 +--
 src/styles/variables.scss               |  7 +--
 5 files changed, 61 insertions(+), 68 deletions(-)

diff --git a/src/packages/popover/demos/h5/demo4.tsx b/src/packages/popover/demos/h5/demo4.tsx
index d75b9bb232..6a5780e4b7 100644
--- a/src/packages/popover/demos/h5/demo4.tsx
+++ b/src/packages/popover/demos/h5/demo4.tsx
@@ -4,28 +4,28 @@ import {
   Cell,
   Picker,
   PickerOnChangeCallbackParameter,
+  FullPosition,
 } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   const [baseDesc, setBaseDesc] = useState('')
   const [showPicker, setShowPicker] = useState(false)
   const [customPositon, setCustomPosition] = useState(false)
-  const [curPostion, setCurPostion] = useState('')
+  const [curPostion, setCurPostion] = useState<FullPosition>('left')
 
   const columns = [
     [
-      { label: 'top', value: 'top' },
-      { label: 'top-start', value: 'top-start' },
-      { label: 'top-end', value: 'top-end' },
+      { label: 'top-left', value: 'top-left' },
+      { label: 'top-right', value: 'top-right' },
       { label: 'right', value: 'right' },
-      { label: 'right-start', value: 'right-start' },
-      { label: 'right-end', value: 'right-end' },
+      { label: 'right-top', value: 'right-top' },
+      { label: 'right-bottom', value: 'right-bottom' },
       { label: 'bottom', value: 'bottom' },
-      { label: 'bottom-start', value: 'bottom-start' },
-      { label: 'bottom-end', value: 'bottom-end' },
+      { label: 'bottom-left', value: 'bottom-left' },
+      { label: 'bottom-right', value: 'bottom-right' },
       { label: 'left', value: 'left' },
-      { label: 'left-start', value: 'left-start' },
-      { label: 'left-end', value: 'left-end' },
+      { label: 'left-top', value: 'left-top' },
+      { label: 'left-bottom', value: 'left-bottom' },
     ],
   ]
   const positionList = [
@@ -62,7 +62,7 @@ const Demo4 = () => {
         }}
         onChange={({ selectedOptions }: PickerOnChangeCallbackParameter) => {
           if (selectedOptions[0]?.value) {
-            setCurPostion(selectedOptions[0].value as string)
+            setCurPostion(selectedOptions[0].value as FullPosition)
           }
         }}
         onClose={() => {
diff --git a/src/packages/popover/popover.scss b/src/packages/popover/popover.scss
index 5b597c97a7..744225ca60 100644
--- a/src/packages/popover/popover.scss
+++ b/src/packages/popover/popover.scss
@@ -32,13 +32,13 @@
         transform: rotate(90deg) translateY(-50%);
       }
 
-      &.nut-popover-arrow-left-start {
+      &.nut-popover-arrow-left-top {
         top: 16px;
         right: -8px;
         transform: rotate(90deg) translateY(0%);
       }
 
-      &.nut-popover-arrow-left-end {
+      &.nut-popover-arrow-left-bottom {
         bottom: 16px;
         right: -8px;
         transform: rotate(90deg) translateY(0%);
@@ -53,13 +53,13 @@
         transform: rotate(-90deg) translateY(-50%);
       }
 
-      &.nut-popover-arrow-right-start {
+      &.nut-popover-arrow-right-top {
         top: 16px;
         left: -8px;
         transform: rotate(-90deg) translateY(0%);
       }
 
-      &.nut-popover-arrow-right-end {
+      &.nut-popover-arrow-right-bottom {
         bottom: 16px;
         left: -8px;
         transform: rotate(-90deg) translateY(0%);
@@ -77,13 +77,13 @@
     max-height: initial;
     overflow-y: initial;
 
-    .nut-popover-menu-item {
+    .nut-popover-item {
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0 $popover-menu-item-padding;
+      padding: 0 $popover-item-padding;
       border-bottom: 1px solid $popover-divider-color;
-      max-width: $popover-menu-item-width;
+      max-width: $popover-item-width;
       word-wrap: break-word;
 
       &:last-child {
@@ -127,12 +127,12 @@
         }
       }
 
-      &.nut-popover-menu-disabled {
+      &.nut-popover-item-disabled {
         color: $popover-disable-color;
         cursor: not-allowed;
       }
 
-      &.nut-popover-menu-taroitem {
+      &.nut-popover-item-taroitem {
         display: flex;
       }
     }
@@ -145,18 +145,18 @@
       }
     }
 
-    &-top-end {
+    &-top-right {
       right: 0;
-      .nut-popover-arrow-top-end {
+      .nut-popover-arrow-top-right {
         right: 16px;
         bottom: -3.5px;
         transform: rotate(180deg) translateX(0%);
       }
     }
 
-    &-top-start {
+    &-top-left {
       left: 0;
-      .nut-popover-arrow-top-start {
+      .nut-popover-arrow-top-left {
         left: 16px;
         bottom: -3.5px;
         transform: rotate(180deg) translateX(0%);
@@ -170,35 +170,35 @@
       }
     }
 
-    &-bottom-end {
+    &-bottom-right {
       right: 0;
-      .nut-popover-arrow-bottom-end {
+      .nut-popover-arrow-bottom-right {
         right: 16px;
         transform: translateX(0%);
       }
     }
 
-    &-bottom-start {
+    &-bottom-left {
       left: 0;
-      .nut-popover-arrow-bottom-start {
+      .nut-popover-arrow-bottom-left {
         left: 16px;
         transform: translateX(0%);
       }
     }
 
-    &-left-end {
+    &-left-bottom {
       bottom: 0;
     }
 
-    &-left-start {
+    &-left-top {
       top: 0;
     }
 
-    &-right-end {
+    &-right-bottom {
       bottom: 0;
     }
 
-    &-right-start {
+    &-right-top {
       top: 0;
     }
   }
@@ -217,7 +217,7 @@
   .nut-popover-content {
     background: $popover-text-color !important;
     color: $popover-content-background-color !important;
-    .nut-popover-menu-item {
+    .nut-popover-item {
       &-action-icon {
         color: rgba(255, 255, 255, 0.8);
       }
@@ -228,7 +228,7 @@
 [dir='rtl'] .nut-popover,
 .nut-rtl .nut-popover {
   .nut-popover-content {
-    .nut-popover-menu-item {
+    .nut-popover-item {
       &-name {
         margin-left: 0;
         margin-right: 4px;
@@ -236,7 +236,7 @@
 
       &-action-icon {
         right: auto;
-        left: $popover-menu-item-padding;
+        left: $popover-item-padding;
       }
     }
     &-top {
@@ -246,21 +246,21 @@
         transform: translateX(50%);
       }
     }
-    &-top-end {
+    &-top-right {
       right: auto;
       left: 0;
 
-      .nut-popover-arrow-top-end {
+      .nut-popover-arrow-top-right {
         right: auto;
         left: 16px;
       }
     }
 
-    &-top-start {
+    &-top-left {
       left: auto;
       right: 0;
 
-      .nut-popover-arrow-top-start {
+      .nut-popover-arrow-top-left {
         left: auto;
         right: 16px;
       }
@@ -273,22 +273,22 @@
         transform: translateX(50%);
       }
     }
-    &-bottom-end {
+    &-bottom-right {
       right: auto;
 
       left: 0;
 
-      .nut-popover-arrow-bottom-end {
+      .nut-popover-arrow-bottom-right {
         right: auto;
         left: 16px;
       }
     }
 
-    &-bottom-start {
+    &-bottom-left {
       left: auto;
       right: 0;
 
-      .nut-popover-arrow-bottom-start {
+      .nut-popover-arrow-bottom-left {
         left: auto;
         right: 16px;
       }
diff --git a/src/packages/popover/popover.tsx b/src/packages/popover/popover.tsx
index 6f194dc6a4..2e86036d70 100644
--- a/src/packages/popover/popover.tsx
+++ b/src/packages/popover/popover.tsx
@@ -184,10 +184,10 @@ export const Popover: FunctionComponent<
           styles[dir] =
             `${-(contentWidth - width) / 2 + rootPosition[dir] + parallel}px`
         }
-        if (skew === 'start') {
+        if (skew === 'left') {
           styles.left = `${left + parallel}px`
         }
-        if (skew === 'end') {
+        if (skew === 'right') {
           styles.left = `${right + parallel}px`
         }
       }
@@ -200,10 +200,10 @@ export const Popover: FunctionComponent<
             top - contentHeight / 2 + height / 2 - 4 + parallel
           }px`
         }
-        if (skew === 'start') {
+        if (skew === 'top') {
           styles.top = `${top + parallel}px`
         }
-        if (skew === 'end') {
+        if (skew === 'bottom') {
           styles.top = `${top + height + parallel}px`
         }
       }
@@ -224,10 +224,10 @@ export const Popover: FunctionComponent<
         if (!skew) {
           styles[dir] = `calc(50% + ${arrowOffset}px)`
         }
-        if (skew === 'start') {
+        if (skew === 'left') {
           styles[dir] = `${base + arrowOffset}px`
         }
-        if (skew === 'end') {
+        if (skew === 'right') {
           styles[dir2] = `${base - arrowOffset}px`
         }
       }
@@ -236,10 +236,10 @@ export const Popover: FunctionComponent<
         if (!skew) {
           styles.top = `calc(50% - ${arrowOffset}px)`
         }
-        if (skew === 'start') {
+        if (skew === 'top') {
           styles.top = `${base - arrowOffset}px`
         }
-        if (skew === 'end') {
+        if (skew === 'bottom') {
           styles.bottom = `${base + arrowOffset}px`
         }
       }
@@ -301,8 +301,8 @@ export const Popover: FunctionComponent<
                     <div
                       className={classNames(
                         {
-                          'nut-popover-menu-item': true,
-                          'nut-popover-menu-disabled': item.disabled,
+                          'nut-popover-item': true,
+                          'nut-popover-item-disabled': item.disabled,
                         },
                         item.className
                       )}
@@ -310,16 +310,12 @@ export const Popover: FunctionComponent<
                       onClick={() => handleSelect(item, index)}
                     >
                       {item.icon && (
-                        <div className="nut-popover-menu-item-icon">
-                          {item.icon}
-                        </div>
+                        <div className="nut-popover-item-icon">{item.icon}</div>
                       )}
-                      <div className="nut-popover-menu-item-name">
-                        {item.name}
-                      </div>
+                      <div className="nut-popover-item-name">{item.name}</div>
                       {item.action && item.action.icon && (
                         <div
-                          className="nut-popover-menu-item-action-icon"
+                          className="nut-popover-item-action-icon"
                           onClick={(e) => item.action?.onClick?.(e)}
                         >
                           {item.action.icon}
diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss
index 51a352ad8a..1dd8ed0577 100644
--- a/src/packages/popup/popup.scss
+++ b/src/packages/popup/popup.scss
@@ -160,13 +160,13 @@
       }
     }
 
-    &-default-enter-active {
+    &-none-enter-active {
       animation-fill-mode: both;
       animation-name: popup-scale-fade-in;
       animation-duration: $popup-animation-duration;
     }
 
-    &-default-exit-active {
+    &-none-exit-active {
       animation-fill-mode: both;
       animation-name: popup-scale-fade-out;
       animation-duration: $popup-animation-duration;
@@ -323,7 +323,7 @@
       animation-duration: $popup-animation-duration;
     }
 
-    &-default-exit-done,
+    &-none-exit-done,
     &-center-exit-done,
     &-left-exit-done,
     &-right-exit-done,
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 2f41f49198..b8764c91de 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1658,11 +1658,8 @@ $popover-divider-color: var(
   --nutui-popover-divider-color,
   $color-border
 ) !default;
-$popover-menu-item-padding: var(
-  --nutui-popover-menu-item-padding,
-  8px
-) !default;
-$popover-menu-item-width: var(--nutui-popover-menu-item-width, 160px) !default;
+$popover-item-padding: var(--nutui-popover-item-padding, 8px) !default;
+$popover-item-width: var(--nutui-popover-item-width, 160px) !default;
 
 //progress（✅）
 $progress-height: var(--nutui-progress-height, 10px) !default;

From f84b83f1d40f5fedb04700042a9edbaa69e58168 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Wed, 2 Apr 2025 17:02:17 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E6=A0=B7=E5=BC=8F=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/packages/button/button.scss          | 24 +++------------
 src/packages/button/demo.tsx             | 37 ++++++------------------
 src/packages/button/demos/h5/demo1.tsx   |  6 ++--
 src/packages/button/demos/h5/demo2.tsx   |  6 ++--
 src/packages/button/demos/h5/demo3.tsx   |  6 ++--
 src/packages/button/demos/h5/demo4.tsx   |  6 ++--
 src/packages/button/demos/h5/demo5.tsx   |  6 ++--
 src/packages/button/demos/h5/demo6.tsx   |  6 ++--
 src/packages/button/demos/h5/demo7.tsx   | 15 +++++-----
 src/packages/button/demos/h5/demo8.tsx   | 10 ++++---
 src/packages/button/demos/h5/demo9.tsx   |  6 ++--
 src/packages/button/demos/taro/demo8.tsx |  9 +++---
 src/packages/button/doc.en-US.md         |  8 ++---
 src/packages/button/doc.md               | 11 ++++---
 src/packages/button/doc.taro.md          | 11 ++++---
 src/packages/button/doc.zh-TW.md         | 17 ++++++-----
 16 files changed, 79 insertions(+), 105 deletions(-)

diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
index 9d88be721e..0ce4c5b8aa 100644
--- a/src/packages/button/button.scss
+++ b/src/packages/button/button.scss
@@ -101,22 +101,6 @@
 
   &-round {
     border-radius: $button-border-radius;
-
-    &-xlarge {
-      border-radius: $button-xlarge-border-radius;
-    }
-
-    &-large {
-      border-radius: $button-large-border-radius;
-    }
-
-    &-small {
-      border-radius: $button-small-border-radius;
-    }
-
-    &-mini {
-      border-radius: $button-mini-border-radius;
-    }
   }
 
   &-default {
@@ -155,7 +139,7 @@
     height: $button-xlarge-height;
     padding: $button-xlarge-padding;
     font-size: $button-xlarge-font-size;
-    border-radius: $radius-base;
+    border-radius: $button-xlarge-border-radius;
 
     .nut-button-text {
       margin-left: $button-xlarge-text-icon-margin;
@@ -178,7 +162,7 @@
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
-    border-radius: $radius-s;
+    border-radius: $button-large-border-radius;
 
     .nut-button-text {
       margin-left: $button-xlarge-text-icon-margin;
@@ -202,7 +186,7 @@
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
-    border-radius: $radius-xs;
+    border-radius: $button-small-border-radius;
 
     .nut-icon {
       font-size: $button-small-font-size;
@@ -219,7 +203,7 @@
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
-    border-radius: $radius-xs;
+    border-radius: $button-mini-border-radius;
 
     .nut-icon {
       font-size: $button-mini-font-size;
diff --git a/src/packages/button/demo.tsx b/src/packages/button/demo.tsx
index c6c7b0cf5e..3b9c27b59f 100644
--- a/src/packages/button/demo.tsx
+++ b/src/packages/button/demo.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { useTranslate } from '@/sites/assets/locale'
-import Cell from '../cell'
 import Demo1 from './demos/h5/demo1'
 import Demo2 from './demos/h5/demo2'
 import Demo3 from './demos/h5/demo3'
@@ -54,41 +53,23 @@ const ButtonDemo = () => {
     <>
       <div className="demo">
         <h2>{translated.ce5c5446}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo1 />
-        </Cell>
+        <Demo1 />
         <h2>{translated.e51e4582}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo2 />
-        </Cell>
+        <Demo2 />
         <h2>{translated['0aaad622']}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo3 />
-        </Cell>
+        <Demo3 />
         <h2>{translated['7db1a8b2']}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo4 />
-        </Cell>
+        <Demo4 />
         <h2>{translated.ce5c5447}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo5 />
-        </Cell>
+        <Demo5 />
         <h2>{translated.a52bef0c}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo6 />
-        </Cell>
+        <Demo6 />
         <h2>{translated['0aaad620']}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo7 />
-        </Cell>
+        <Demo7 />
         <h2>{translated.c9e6df49}</h2>
-        <Cell>
-          <Demo8 />
-        </Cell>
+        <Demo8 />
         <h2>{translated.customColor}</h2>
-        <Cell style={{ flexWrap: 'wrap' }}>
-          <Demo9 />
-        </Cell>
+        <Demo9 />
       </div>
     </>
   )
diff --git a/src/packages/button/demos/h5/demo1.tsx b/src/packages/button/demos/h5/demo1.tsx
index 0a1af6bb59..718d24662f 100644
--- a/src/packages/button/demos/h5/demo1.tsx
+++ b/src/packages/button/demos/h5/demo1.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo1 = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button type="primary" style={marginStyle}>
         Primary
       </Button>
@@ -23,7 +23,7 @@ const Demo1 = () => {
       <Button type="success" style={marginStyle}>
         Success
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo1
diff --git a/src/packages/button/demos/h5/demo2.tsx b/src/packages/button/demos/h5/demo2.tsx
index e79948b669..85d10628b4 100644
--- a/src/packages/button/demos/h5/demo2.tsx
+++ b/src/packages/button/demos/h5/demo2.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo2 = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button type="primary" fill="solid" style={marginStyle}>
         Solid
       </Button>
@@ -17,7 +17,7 @@ const Demo2 = () => {
       <Button fill="none" style={marginStyle}>
         None
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo2
diff --git a/src/packages/button/demos/h5/demo3.tsx b/src/packages/button/demos/h5/demo3.tsx
index 92680bbc0c..3edb13d4b6 100644
--- a/src/packages/button/demos/h5/demo3.tsx
+++ b/src/packages/button/demos/h5/demo3.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Star, Plus } from '@nutui/icons-react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button
         type="primary"
         icon={<Star />}
@@ -115,7 +115,7 @@ const Demo3 = () => {
       >
         Button
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo3
diff --git a/src/packages/button/demos/h5/demo4.tsx b/src/packages/button/demos/h5/demo4.tsx
index fe13a96859..dbfa76fb06 100644
--- a/src/packages/button/demos/h5/demo4.tsx
+++ b/src/packages/button/demos/h5/demo4.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import { Star, Plus } from '@nutui/icons-react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo4 = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button
         disabled
         type="primary"
@@ -111,7 +111,7 @@ const Demo4 = () => {
       >
         Disabled
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo4
diff --git a/src/packages/button/demos/h5/demo5.tsx b/src/packages/button/demos/h5/demo5.tsx
index bd406adb43..cc4c719a60 100644
--- a/src/packages/button/demos/h5/demo5.tsx
+++ b/src/packages/button/demos/h5/demo5.tsx
@@ -1,17 +1,17 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo5 = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button style={marginStyle} type="primary" shape="square">
         Square Button
       </Button>
       <Button style={marginStyle} type="primary">
         Round Button
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo5
diff --git a/src/packages/button/demos/h5/demo6.tsx b/src/packages/button/demos/h5/demo6.tsx
index e572980441..7c7349f692 100644
--- a/src/packages/button/demos/h5/demo6.tsx
+++ b/src/packages/button/demos/h5/demo6.tsx
@@ -1,11 +1,11 @@
 import React, { useState } from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo6 = () => {
   const [loading, setLoading] = useState(false)
   const marginStyle = { margin: 8 }
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button loading type="warning" style={marginStyle}>
         Loading
       </Button>
@@ -22,7 +22,7 @@ const Demo6 = () => {
       >
         Click Me!
       </Button>
-    </>
+    </Cell>
   )
 }
 export default Demo6
diff --git a/src/packages/button/demos/h5/demo7.tsx b/src/packages/button/demos/h5/demo7.tsx
index c19dd69006..c8bce72b60 100644
--- a/src/packages/button/demos/h5/demo7.tsx
+++ b/src/packages/button/demos/h5/demo7.tsx
@@ -1,19 +1,18 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const App = () => {
   const marginStyle = { margin: 8 }
   return (
-    <>
-      <Button type="primary" style={marginStyle}>
-        Normal
+    <Cell style={{ flexWrap: 'wrap' }}>
+      <Button size="mini" style={marginStyle} type="primary">
+        Mini
       </Button>
-      <Button style={marginStyle}>Normal</Button>
       <Button size="small" style={marginStyle} type="primary">
         Small
       </Button>
-      <Button size="mini" style={marginStyle} type="primary">
-        Mini
+      <Button type="primary" style={marginStyle}>
+        Normal
       </Button>
       <Button size="large" type="primary" style={marginStyle}>
         Large
@@ -21,7 +20,7 @@ const App = () => {
       <Button size="xlarge" type="primary" style={marginStyle}>
         XLarge
       </Button>
-    </>
+    </Cell>
   )
 }
 export default App
diff --git a/src/packages/button/demos/h5/demo8.tsx b/src/packages/button/demos/h5/demo8.tsx
index e8b1f1ed58..21769ad851 100644
--- a/src/packages/button/demos/h5/demo8.tsx
+++ b/src/packages/button/demos/h5/demo8.tsx
@@ -1,11 +1,13 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const Demo8 = () => {
   return (
-    <Button block type="primary">
-      Block Button
-    </Button>
+    <Cell style={{ flexWrap: 'wrap' }}>
+      <Button block type="primary">
+        Block Button
+      </Button>
+    </Cell>
   )
 }
 export default Demo8
diff --git a/src/packages/button/demos/h5/demo9.tsx b/src/packages/button/demos/h5/demo9.tsx
index 7e814f0d2b..9c6ec13ec6 100644
--- a/src/packages/button/demos/h5/demo9.tsx
+++ b/src/packages/button/demos/h5/demo9.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
-import { Button } from '@nutui/nutui-react'
+import { Button, Cell } from '@nutui/nutui-react'
 
 const App = () => {
   return (
-    <>
+    <Cell style={{ flexWrap: 'wrap' }}>
       <Button
         color="blue"
         style={{
@@ -38,7 +38,7 @@ const App = () => {
       >
         渐变按钮
       </Button>
-    </>
+    </Cell>
   )
 }
 export default App
diff --git a/src/packages/button/demos/taro/demo8.tsx b/src/packages/button/demos/taro/demo8.tsx
index 5139cf8e24..60d397cea5 100644
--- a/src/packages/button/demos/taro/demo8.tsx
+++ b/src/packages/button/demos/taro/demo8.tsx
@@ -10,15 +10,14 @@ const Demo8 = () => {
 
   return (
     <Cell style={{ flexWrap: 'wrap' }}>
-      <Button type="primary" style={marginStyle}>
-        Normal
+      <Button size="mini" style={marginStyle} type="primary">
+        Mini
       </Button>
-      <Button style={marginStyle}>Normal</Button>
       <Button size="small" style={marginStyle} type="primary">
         Small
       </Button>
-      <Button size="mini" style={marginStyle} type="primary">
-        Mini
+      <Button type="primary" style={marginStyle}>
+        Normal
       </Button>
       <Button size="large" type="primary" style={marginStyle}>
         Large
diff --git a/src/packages/button/doc.en-US.md b/src/packages/button/doc.en-US.md
index 54f98dfc4e..42fe1447fc 100644
--- a/src/packages/button/doc.en-US.md
+++ b/src/packages/button/doc.en-US.md
@@ -125,7 +125,7 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-button-border-radius | Button rounded corner settings | `8px` |
+| \--nutui-button-border-radius | Button rounded corner settings | `$button-border-radius` |
 | \--nutui-button-border-width | The border width of the button | `1px` |
 | \--nutui-button-normal-padding | padding value when size normal | `0px 12px` |
 | \--nutui-button-default-height | The height of the button with type default | `32px` |
@@ -138,15 +138,15 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-button-default-font-size | The font size of the button with type default | `$font-size-s` |
 | \--nutui-button-large-height | The height of the button with size large | `40px` |
 | \--nutui-button-large-font-size | The font size of the button with size large | `$font-size-base` |
-| \--nutui-button-large-border-radius | Rounded corners for buttons with size large | `12px` |
+| \--nutui-button-large-border-radius | Rounded corners for buttons with size large | `$button-large-border-radius` |
 | \--nutui-button-small-padding | Padding for buttons of size small | `0 8px` |
 | \--nutui-button-small-height | The height of the button with size small | `28px` |
 | \--nutui-button-small-font-size | The font size of the button with size small | `$font-size-s` |
-| \--nutui-button-small-border-radius | Rounded corners for buttons with size small | `8px` |
+| \--nutui-button-small-border-radius | Rounded corners for buttons with size small | `$button-small-border-radius` |
 | \--nutui-button-mini-padding | Padding for buttons with size mini | `0 8px` |
 | \--nutui-button-mini-height | size is the height of the mini button | `24px` |
 | \--nutui-button-mini-font-size | The font size of the button with size mini | `$font-size-xs` |
-| \--nutui-button-mini-border-radius | The rounded corners of the button with size mini | `6px` |
+| \--nutui-button-mini-border-radius | The rounded corners of the button with size mini | `$button-mini-border-radius` |
 | \--nutui-button-text-icon-margin | Margin of text with icon button | `4px` |
 
 <Contribution name="Button" />
diff --git a/src/packages/button/doc.md b/src/packages/button/doc.md
index 708c46e39e..246d8ed3ef 100644
--- a/src/packages/button/doc.md
+++ b/src/packages/button/doc.md
@@ -124,7 +124,7 @@ import { Button } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-button-border-radius | 按钮的圆角设置 | `8px` |
+| \--nutui-button-border-radius | 按钮的圆角设置 | `$button-border-radius` |
 | \--nutui-button-border-width | 按钮的边框宽度 | `1px` |
 | \--nutui-button-normal-padding | size normal时的padding值 | `0px 12px` |
 | \--nutui-button-default-height | type 为 default 的按钮的高度 | `32px` |
@@ -135,17 +135,20 @@ import { Button } from '@nutui/nutui-react'
 | \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
 | \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 12px` |
 | \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-s` |
+| \--nutui-button-xlarge-height | size 为 xlarge 的按钮的高度 | `48px` |
+| \--nutui-button-xlarge-font-size | size 为 lxarge 的按钮的字号 | `$font-size-xl` |
+| \--nutui-button-xlarge-border-radius | size 为 xlarge 的按钮的圆角 | `$button-xlarge-border-radius` |
 | \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
 | \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
-| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `12px` |
+| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `$button-large-border-radius` |
 | \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0 8px` |
 | \--nutui-button-small-height | size 为 small 的按钮的高度 | `28px` |
 | \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-size-s` |
-| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `8px` |
+| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `$button-small-border-radius` |
 | \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 8px` |
 | \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` |
 | \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-xs` |
-| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `6px` |
+| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `$button-mini-border-radius` |
 | \--nutui-button-text-icon-margin | 带 icon按钮的文本的边距 | `4px` |
 
 <Contribution name="Button" />
diff --git a/src/packages/button/doc.taro.md b/src/packages/button/doc.taro.md
index 23c5598269..7a6b113a92 100644
--- a/src/packages/button/doc.taro.md
+++ b/src/packages/button/doc.taro.md
@@ -137,7 +137,7 @@ import { Button } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-button-border-radius | 按钮的圆角设置 | `8px` |
+| \--nutui-button-border-radius | 按钮的圆角设置 | `$button-border-radius` |
 | \--nutui-button-border-width | 按钮的边框宽度 | `1px` |
 | \--nutui-button-normal-padding | size normal时的padding值 | `0px 12px` |
 | \--nutui-button-default-height | type 为 default 的按钮的高度 | `32px` |
@@ -148,17 +148,20 @@ import { Button } from '@nutui/nutui-react-taro'
 | \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
 | \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 12px` |
 | \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-s` |
+| \--nutui-button-xlarge-height | size 为 xlarge 的按钮的高度 | `48px` |
+| \--nutui-button-xlarge-font-size | size 为 lxarge 的按钮的字号 | `$font-size-xl` |
+| \--nutui-button-xlarge-border-radius | size 为 xlarge 的按钮的圆角 | `$button-xlarge-border-radius` |
 | \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
 | \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
-| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `12px` |
+| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `$button-large-border-radius` |
 | \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0 8px` |
 | \--nutui-button-small-height | size 为 small 的按钮的高度 | `28px` |
 | \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-size-s` |
-| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `8px` |
+| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `$button-small-border-radius` |
 | \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0 8px` |
 | \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` |
 | \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-xs` |
-| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `6px` |
+| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `$button-mini-border-radius` |
 | \--nutui-button-text-icon-margin | 带 icon按钮的文本的边距 | `4px` |
 
 <Contribution name="Button" />
diff --git a/src/packages/button/doc.zh-TW.md b/src/packages/button/doc.zh-TW.md
index a3e039b083..d95bdf0666 100644
--- a/src/packages/button/doc.zh-TW.md
+++ b/src/packages/button/doc.zh-TW.md
@@ -125,28 +125,31 @@ import { Button } from '@nutui/nutui-react'
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-button-border-radius | 按鈕的圓角設定 | `8px` |
+| \--nutui-button-border-radius | 按鈕的圓角設置 | `$button-border-radius` |
 | \--nutui-button-border-width | 按鈕的邊框寬度 | `1px` |
 | \--nutui-button-normal-padding | size normal時的padding值 | `0px 12px` |
 | \--nutui-button-default-height | type 為 default 的按鈕的高度 | `32px` |
-| \--nutui-button-default-color | type 為 default 的按鈕的文字色 | `$color-title` |
+| \--nutui-button-default-color | type 為 default 的按鈕的文本色 | `$color-title` |
 | \--nutui-button-default-background-color | type 為 default 的按鈕的背景色 | `transparent` |
 | \--nutui-button-default-border-color | type 為 default 的按鈕的邊框色 | `$color-text` |
 | \--nutui-button-default-disabled | type 為 default 的按鈕的禁用色 | `$color-text-disabled` |
-| \--nutui-button-default-disabled-color | type 為 default 的按鈕的停用文字色 | `$color-text-help` |
+| \--nutui-button-default-disabled-color | type 為 default 的按鈕的禁用文本色 | `$color-text-help` |
 | \--nutui-button-default-padding | type 為 default 的按鈕的內邊距 | `0 12px` |
 | \--nutui-button-default-font-size | type 為 default 的按鈕的字號 | `$font-size-s` |
+| \--nutui-button-xlarge-height | size 為 xlarge 的按鈕的高度 | `48px` |
+| \--nutui-button-xlarge-font-size | size 為 lxarge 的按鈕的字號 | `$font-size-xl` |
+| \--nutui-button-xlarge-border-radius | size 為 xlarge 的按鈕的圓角 | `$button-xlarge-border-radius` |
 | \--nutui-button-large-height | size 為 large 的按鈕的高度 | `40px` |
 | \--nutui-button-large-font-size | size 為 large 的按鈕的字號 | `$font-size-base` |
-| \--nutui-button-large-border-radius | size 為 large 的按鈕的圓角 | `12px` |
+| \--nutui-button-large-border-radius | size 為 large 的按鈕的圓角 | `$button-large-border-radius` |
 | \--nutui-button-small-padding | size 為 small 的按鈕的內邊距 | `0 8px` |
 | \--nutui-button-small-height | size 為 small 的按鈕的高度 | `28px` |
 | \--nutui-button-small-font-size | size 為 small 的按鈕的字號 | `$font-size-s` |
-| \--nutui-button-small-border-radius | size 為 small 的按鈕的圓角 | `8px` |
+| \--nutui-button-small-border-radius | size 為 small 的按鈕的圓角 | `$button-small-border-radius` |
 | \--nutui-button-mini-padding | size 為 mini 的按鈕的內邊距 | `0 8px` |
 | \--nutui-button-mini-height | size 為 mini 的按鈕的高度 | `24px` |
 | \--nutui-button-mini-font-size | size 為 mini 的按鈕的字號 | `$font-size-xs` |
-| \--nutui-button-mini-border-radius | size 為 mini 的按鈕的圓角 | `6px` |
-| \--nutui-button-text-icon-margin | 有 icon按鈕的文字的邊距 | `4px` |
+| \--nutui-button-mini-border-radius | size 為 mini 的按鈕的圓角 | `$button-mini-border-radius` |
+| \--nutui-button-text-icon-margin | 帶 icon按鈕的文本的邊距 | `4px` |
 
 <Contribution name="Button" />