diff --git a/packages/devui-vue/docs/components/button/buttonGroup.vue b/packages/devui-vue/docs/components/button/buttonGroup.vue
deleted file mode 100644
index 9a87aacb9d..0000000000
--- a/packages/devui-vue/docs/components/button/buttonGroup.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<template>
-  <div>
-    <d-button-group>
-      <d-button variant="solid">
-        按钮名称
-      </d-button>
-      <d-button
-        icon="icon-select-arrow"
-        variant="solid"
-      />
-    </d-button-group>
-
-    <p>尺寸：sm</p>
-    <d-button-group size="sm">
-      <d-button
-        color="primary"
-        variant="solid"
-      >
-        上海
-      </d-button>
-      <d-button>北京</d-button>
-      <d-button>深圳</d-button>
-    </d-button-group>
-
-    <p>尺寸：默认</p>
-    <d-button-group>
-      <d-button color="primary">
-        上海
-      </d-button>
-      <d-button>北京</d-button>
-      <d-button>深圳</d-button>
-    </d-button-group>
-
-    <p>尺寸：lg</p>
-    <d-button-group size="lg">
-      <d-button color="primary">
-        上海
-      </d-button>
-      <d-button>北京</d-button>
-      <d-button>深圳</d-button>
-    </d-button-group>
-
-    <p>与dropdown下拉菜单一起使用</p>
-    <d-button-group>
-      <d-dropdown
-        style="width: 100px;"
-        :position="position"
-        align="start"
-      >
-        <d-button>Click Me 1</d-button>
-        <template #menu>
-          <ul class="list-menu">
-            <li class="menu-item">
-              Item 1
-            </li>
-            <li class="menu-item">
-              Item 2
-            </li>
-            <li class="menu-item">
-              Item 3
-            </li>
-            <li class="menu-item">
-              Item 4
-            </li>
-          </ul>
-        </template>
-      </d-dropdown>
-      <d-button
-        icon="add"
-        variant="solid"
-      >
-        上海
-      </d-button>
-      <d-dropdown
-        style="width: 100px;"
-        :position="position"
-        align="start"
-      >
-        <d-button>Click Me 2</d-button>
-        <template #menu>
-          <ul class="list-menu">
-            <li class="menu-item">
-              Item 1
-            </li>
-            <li class="menu-item">
-              Item 2
-            </li>
-            <li class="menu-item">
-              Item 3
-            </li>
-            <li class="menu-item">
-              Item 4
-            </li>
-          </ul>
-        </template>
-      </d-dropdown>
-      <d-button icon="filter">
-        北京
-      </d-button>
-      <d-dropdown
-        style="width: 100px;"
-        :position="position"
-        align="start"
-      >
-        <d-button>Click Me 3</d-button>
-        <template #menu>
-          <ul class="list-menu">
-            <li class="menu-item">
-              Item 1
-            </li>
-            <li class="menu-item">
-              Item 2
-            </li>
-            <li class="menu-item">
-              Item 3
-            </li>
-            <li class="menu-item">
-              Item 4
-            </li>
-          </ul>
-        </template>
-      </d-dropdown>
-    </d-button-group>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const position = ref(["bottom-start", "top-start"]);
-</script>
diff --git a/packages/devui-vue/docs/components/button/disable.vue b/packages/devui-vue/docs/components/button/disable.vue
deleted file mode 100644
index e2e4ceec35..0000000000
--- a/packages/devui-vue/docs/components/button/disable.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <div class="demo-spacing">
-      <d-button variant="solid">
-        Solid Button
-      </d-button>
-      <d-button>Outline Button</d-button>
-      <d-button variant="text">
-        Text Button
-      </d-button>
-    </div>
-
-    <div class="demo-spacing">
-      <d-button
-        variant="solid"
-        disabled
-      >
-        Solid Button
-      </d-button>
-      <d-button disabled>
-        Outline Button
-      </d-button>
-      <d-button
-        variant="text"
-        disabled
-      >
-        Text Button
-      </d-button>
-    </div>
-  </div>
-</template>
diff --git a/packages/devui-vue/docs/components/button/icon.vue b/packages/devui-vue/docs/components/button/icon.vue
deleted file mode 100644
index ed6f044414..0000000000
--- a/packages/devui-vue/docs/components/button/icon.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <div class="demo-spacing">
-    <d-button
-      icon="add"
-      variant="solid"
-    >
-      New
-    </d-button>
-    <d-button icon="filter">
-      Filter
-    </d-button>
-    <d-button
-      icon="connect"
-      variant="text"
-    >
-      Link
-    </d-button>
-    <d-button
-      icon="delete"
-      variant="text"
-      title="Delete"
-    />
-    <d-button
-      shape="round"
-      title="Add"
-    >
-      Add
-    </d-button>
-    <d-button
-      icon="delete"
-      shape="circle"
-      title="Delete"
-      size="sm"
-    />
-    <d-button
-      icon="delete"
-      shape="circle"
-      title="Delete"
-    />
-    <d-button
-      variant="solid"
-      icon="filter"
-      shape="circle"
-      title="Add"
-      size="lg"
-    />
-  </div>
-</template>
diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md
index 1b47383b51..4ad82f0c73 100644
--- a/packages/devui-vue/docs/components/button/index.md
+++ b/packages/devui-vue/docs/components/button/index.md
@@ -2,31 +2,77 @@
 
 按钮用于开始一个即时操作。
 
-#### 何时使用
-
+:::tip 何时使用
 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
+:::
+
+## 用法
 
 ### 形态
 
-:::demo 通过`variant`设置按钮形态，目前支持`solid`、`outline`、`text`三种形态，默认为`outline`。
+通过`variant`设置按钮形态，目前支持`solid`、`outline`、`text`三种形态，默认为`outline`。
 
-button/shape
+:::demo
+
+```vue
+<template>
+  <div class="demo-spacing">
+    <d-button variant="solid"> Solid Button </d-button>
+    <d-button>Outline Button</d-button>
+    <d-button variant="text"> Text Button </d-button>
+  </div>
+</template>
+```
 
 :::
 
 ### 主题色
 
-:::demo 通过`color`设置按钮的主题色，目前支持`primary`、`secondary`、`danger`三种主题色，默认为`secondary`。<br>注意：如果`variant`设置成`solid`，则默认使用`primary`主题色。
+通过`color`设置按钮的主题色，目前支持`primary`、`secondary`、`danger`三种主题色，默认为`secondary`。<br>注意：如果`variant`设置成`solid`，则默认使用`primary`主题色。
+
+:::demo
 
-button/theme
+```vue
+<template>
+  <div>
+    <div class="demo-spacing">
+      <d-button variant="solid" color="primary"> Primary </d-button>
+      <d-button color="primary"> Primary </d-button>
+      <d-button variant="text" color="primary"> Primary </d-button>
+    </div>
+
+    <div class="demo-spacing">
+      <d-button variant="solid" color="secondary"> Secondary </d-button>
+      <d-button color="secondary"> Secondary </d-button>
+      <d-button variant="text" color="secondary"> Secondary </d-button>
+    </div>
+
+    <div class="demo-spacing">
+      <d-button variant="solid" color="danger"> Danger </d-button>
+      <d-button color="danger"> Danger </d-button>
+      <d-button variant="text" color="danger"> Danger </d-button>
+    </div>
+  </div>
+</template>
+```
 
 :::
 
 ### 尺寸
 
-:::demo 通过`size`设置按钮尺寸，支持`sm`、`md`、`lg`三种类型的尺寸，默认为`md`。
+通过`size`设置按钮尺寸，支持`sm`、`md`、`lg`三种类型的尺寸，默认为`md`。
 
-button/size
+:::demo
+
+```vue
+<template>
+  <div class="demo-spacing">
+    <d-button size="sm"> Small </d-button>
+    <d-button>Medium</d-button>
+    <d-button size="lg"> Large </d-button>
+  </div>
+</template>
+```
 
 :::
 
@@ -34,15 +80,49 @@ button/size
 
 :::demo 通过`disabled`参数设置按钮禁用状态。
 
-button/disable
+```vue
+<template>
+  <div>
+    <div class="demo-spacing">
+      <d-button variant="solid"> Solid Button </d-button>
+      <d-button>Outline Button</d-button>
+      <d-button variant="text"> Text Button </d-button>
+    </div>
+
+    <div class="demo-spacing">
+      <d-button variant="solid" disabled> Solid Button </d-button>
+      <d-button disabled> Outline Button </d-button>
+      <d-button variant="text" disabled> Text Button </d-button>
+    </div>
+  </div>
+</template>
+```
 
 :::
 
 ### 加载中状态
 
-:::demo 通过`loading`参数设置按钮加载中状态。
+通过`loading`参数设置按钮加载中状态。
 
-button/loading
+:::demo
+
+```vue
+<template>
+  <d-button variant="solid" :loading="showLoading" @click="handleClick"> Click Me </d-button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const showLoading = ref(false);
+const handleClick = () => {
+  showLoading.value = true;
+
+  setTimeout(() => {
+    showLoading.value = false;
+  }, 2000);
+};
+</script>
+```
 
 :::
 
@@ -50,7 +130,20 @@ button/loading
 
 :::demo
 
-button/icon
+```vue
+<template>
+  <div class="demo-spacing">
+    <d-button icon="add" variant="solid"> New </d-button>
+    <d-button icon="filter"> Filter </d-button>
+    <d-button icon="connect" variant="text"> Link </d-button>
+    <d-button icon="delete" variant="text" title="Delete" />
+    <d-button shape="round" title="Add"> Add </d-button>
+    <d-button icon="delete" shape="circle" title="Delete" size="sm" />
+    <d-button icon="delete" shape="circle" title="Delete" />
+    <d-button variant="solid" icon="filter" shape="circle" title="Add" size="lg" />
+  </div>
+</template>
+```
 
 :::
 
@@ -60,22 +153,97 @@ button/icon
 
 :::demo
 
-button/buttonGroup
+```vue
+<template>
+  <div>
+    <d-button-group>
+      <d-button variant="solid"> 按钮名称 </d-button>
+      <d-button icon="icon-select-arrow" variant="solid" />
+    </d-button-group>
+
+    <p>尺寸：sm</p>
+    <d-button-group size="sm">
+      <d-button color="primary" variant="solid"> 上海 </d-button>
+      <d-button>北京</d-button>
+      <d-button>深圳</d-button>
+    </d-button-group>
+
+    <p>尺寸：默认</p>
+    <d-button-group>
+      <d-button color="primary"> 上海 </d-button>
+      <d-button>北京</d-button>
+      <d-button>深圳</d-button>
+    </d-button-group>
+
+    <p>尺寸：lg</p>
+    <d-button-group size="lg">
+      <d-button color="primary"> 上海 </d-button>
+      <d-button>北京</d-button>
+      <d-button>深圳</d-button>
+    </d-button-group>
+
+    <p>与dropdown下拉菜单一起使用</p>
+    <d-button-group>
+      <d-dropdown style="width: 100px;" :position="position" align="start">
+        <d-button>Click Me 1</d-button>
+        <template #menu>
+          <ul class="list-menu">
+            <li class="menu-item">Item 1</li>
+            <li class="menu-item">Item 2</li>
+            <li class="menu-item">Item 3</li>
+            <li class="menu-item">Item 4</li>
+          </ul>
+        </template>
+      </d-dropdown>
+      <d-button icon="add" variant="solid"> 上海 </d-button>
+      <d-dropdown style="width: 100px;" :position="position" align="start">
+        <d-button>Click Me 2</d-button>
+        <template #menu>
+          <ul class="list-menu">
+            <li class="menu-item">Item 1</li>
+            <li class="menu-item">Item 2</li>
+            <li class="menu-item">Item 3</li>
+            <li class="menu-item">Item 4</li>
+          </ul>
+        </template>
+      </d-dropdown>
+      <d-button icon="filter"> 北京 </d-button>
+      <d-dropdown style="width: 100px;" :position="position" align="start">
+        <d-button>Click Me 3</d-button>
+        <template #menu>
+          <ul class="list-menu">
+            <li class="menu-item">Item 1</li>
+            <li class="menu-item">Item 2</li>
+            <li class="menu-item">Item 3</li>
+            <li class="menu-item">Item 4</li>
+          </ul>
+        </template>
+      </d-dropdown>
+    </d-button-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const position = ref(['bottom-start', 'top-start']);
+</script>
+```
 
 :::
 
 ### Button 参数
 
-| 参数名   | 类型                              | 默认        | 说明                      | 跳转 Demo                 |
-| :------- | :-------------------------------- | :---------- | :------------------------ | :------------------------ |
-| variant  | [IButtonVariant](#ibuttonvariant) | 'outline'   | 可选，按钮形态            | [形态](#形态)             |
-| color    | [IButtonColor](#ibuttoncolor)     | 'secondary' | 可选，按钮主题            | [主题色](#主题色)         |
-| size     | [IButtonSize](#ibuttonsize)       | 'md'        | 可选，按钮尺寸            | [尺寸](#尺寸)             |
-| icon     | `string`                          | --          | 可选，自定义按钮图标      | [图标按钮](#图标按钮)     |
-| shape    | [IButtonShape](#ibuttonshape)     | --          | 可选，按钮形状(圆形/圆角) | [图标按钮](#图标按钮)     |
-| disabled | `boolean`                         | false       | 可选，是否禁用 button     | [禁用状态](#禁用状态)     |
-| loading  | `boolean`                         | false       | 可选，设置加载中状态      | [加载中状态](#加载中状态) |
-| native-type  | [IButtonType](#ibuttontype)    | 'button'       | 可选，按钮原生type属性      |  |
+| 参数名      | 类型                              | 默认        | 说明                      | 跳转 Demo                 |
+| :---------- | :-------------------------------- | :---------- | :------------------------ | :------------------------ |
+| variant     | [IButtonVariant](#ibuttonvariant) | 'outline'   | 可选，按钮形态            | [形态](#形态)             |
+| color       | [IButtonColor](#ibuttoncolor)     | 'secondary' | 可选，按钮主题            | [主题色](#主题色)         |
+| size        | [IButtonSize](#ibuttonsize)       | 'md'        | 可选，按钮尺寸            | [尺寸](#尺寸)             |
+| icon        | `string`                          | --          | 可选，自定义按钮图标      | [图标按钮](#图标按钮)     |
+| shape       | [IButtonShape](#ibuttonshape)     | --          | 可选，按钮形状(圆形/圆角) | [图标按钮](#图标按钮)     |
+| disabled    | `boolean`                         | false       | 可选，是否禁用 button     | [禁用状态](#禁用状态)     |
+| loading     | `boolean`                         | false       | 可选，设置加载中状态      | [加载中状态](#加载中状态) |
+| native-type | [IButtonType](#ibuttontype)       | 'button'    | 可选，按钮原生 type 属性  |                           |
 
 ### Button 类型定义
 
diff --git a/packages/devui-vue/docs/components/button/loading.vue b/packages/devui-vue/docs/components/button/loading.vue
deleted file mode 100644
index e9c27cc3cd..0000000000
--- a/packages/devui-vue/docs/components/button/loading.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <d-button
-    variant="solid"
-    :loading="showLoading"
-    @click="handleClick"
-  >
-    Click Me
-  </d-button>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-const showLoading = ref(false);
-const handleClick = () => {
-  showLoading.value = true;
-
-  setTimeout(() => {
-    showLoading.value = false;
-  }, 2000);
-};
-</script>
diff --git a/packages/devui-vue/docs/components/button/shape.vue b/packages/devui-vue/docs/components/button/shape.vue
deleted file mode 100644
index af6e4c72a3..0000000000
--- a/packages/devui-vue/docs/components/button/shape.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="demo-spacing">
-    <d-button variant="solid">
-      Solid Button
-    </d-button>
-    <d-button>Outline Button</d-button>
-    <d-button variant="text">
-      Text Button
-    </d-button>
-  </div>
-</template>
diff --git a/packages/devui-vue/docs/components/button/size.vue b/packages/devui-vue/docs/components/button/size.vue
deleted file mode 100644
index 6205115fa9..0000000000
--- a/packages/devui-vue/docs/components/button/size.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div class="demo-spacing">
-    <d-button size="sm">
-      Small
-    </d-button>
-    <d-button>Medium</d-button>
-    <d-button size="lg">
-      Large
-    </d-button>
-  </div>
-</template>
diff --git a/packages/devui-vue/docs/components/button/theme.vue b/packages/devui-vue/docs/components/button/theme.vue
deleted file mode 100644
index 8639f578e8..0000000000
--- a/packages/devui-vue/docs/components/button/theme.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <div>
-    <div class="demo-spacing">
-      <d-button
-        variant="solid"
-        color="primary"
-      >
-        Primary
-      </d-button>
-      <d-button color="primary">
-        Primary
-      </d-button>
-      <d-button
-        variant="text"
-        color="primary"
-      >
-        Primary
-      </d-button>
-    </div>
-
-    <div class="demo-spacing">
-      <d-button
-        variant="solid"
-        color="secondary"
-      >
-        Secondary
-      </d-button>
-      <d-button color="secondary">
-        Secondary
-      </d-button>
-      <d-button
-        variant="text"
-        color="secondary"
-      >
-        Secondary
-      </d-button>
-    </div>
-
-    <div class="demo-spacing">
-      <d-button
-        variant="solid"
-        color="danger"
-      >
-        Danger
-      </d-button>
-      <d-button color="danger">
-        Danger
-      </d-button>
-      <d-button
-        variant="text"
-        color="danger"
-      >
-        Danger
-      </d-button>
-    </div>
-  </div>
-</template>