diff --git a/packages/devui-vue/devui/button/__tests__/button.spec.ts b/packages/devui-vue/devui/button/__tests__/button.spec.ts
index a03789608d..3c60844552 100644
--- a/packages/devui-vue/devui/button/__tests__/button.spec.ts
+++ b/packages/devui-vue/devui/button/__tests__/button.spec.ts
@@ -2,9 +2,9 @@ import { mount } from '@vue/test-utils';
 import Button from '../src/button';
 
 describe('d-button', () => {
-  it('btnStyle', () => {
+  it('variant', () => {
     const wrapper = mount(Button, {
-      props: { btnStyle: 'danger' },
+      props: { variant: 'danger' },
     });
     expect(wrapper.find('.devui-btn').classes()).toContain('devui-btn-danger');
   });
@@ -36,17 +36,17 @@ describe('d-button', () => {
   });
 
   // 目前还不支持 loading
-  // it('loading', async () => {
-  //   const handleClick = jest.fn();
-  //   const wrapper = mount(Button, {
-  //     props: {
-  //       showLoading: true,
-  //       btnClick: handleClick
-  //     },
-  //   });
-  //   await wrapper.trigger('click');
-  //   expect(handleClick).not.toBeCalled();
-  // });
+  it('loading', async () => {
+    const handleClick = jest.fn();
+    const wrapper = mount(Button, {
+      props: {
+        showLoading: true,
+        btnClick: handleClick
+      },
+    });
+    await wrapper.trigger('click');
+    expect(handleClick).not.toBeCalled();
+  });
 
   it('disabled', async () => {
     const handleClick = jest.fn();
@@ -64,7 +64,7 @@ describe('d-button', () => {
   it('slot', () => {
     const btnText = 'vue3 devui';
     const wrapper = mount(Button, {
-      slots:  {
+      slots: {
         default: btnText
       }
     });
diff --git a/packages/devui-vue/devui/button/src/button-types.ts b/packages/devui-vue/devui/button/src/button-types.ts
index e0e117e309..81317ec17d 100644
--- a/packages/devui-vue/devui/button/src/button-types.ts
+++ b/packages/devui-vue/devui/button/src/button-types.ts
@@ -1,7 +1,7 @@
 import { ExtractPropTypes, PropType } from 'vue';
 
 export type IButtonType = 'button' | 'submit' | 'reset';
-export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
+export type IButtonVariant = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
 export type IButtonPosition = 'left' | 'right' | 'default';
 export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
 
@@ -10,8 +10,8 @@ export const buttonProps = {
     type: String as PropType<IButtonType>,
     default: 'button'
   },
-  btnStyle: {
-    type: String as PropType<IButtonStyle>,
+  variant: {
+    type: String as PropType<IButtonVariant>,
     default: 'primary'
   },
   size: {
diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx
index a132922eb4..5a08a4c839 100644
--- a/packages/devui-vue/devui/button/src/button.tsx
+++ b/packages/devui-vue/devui/button/src/button.tsx
@@ -24,10 +24,10 @@ export default defineComponent({
     const hasContent = computed(() => ctx.slots.default);
 
     const btnClass = computed(() => {
-      const { btnStyle, size, position, bordered, icon } = props;
-      const origin = `devui-btn devui-btn-${btnStyle} devui-btn-${size} devui-btn-${position}`;
+      const { variant, size, position, bordered, icon } = props;
+      const origin = `devui-btn devui-btn-${variant} devui-btn-${size} devui-btn-${position}`;
       const borderedClass = bordered ? 'bordered' : '';
-      const btnIcon = !!icon && !hasContent.value && btnStyle !== 'primary' ? 'd-btn-icon' : '';
+      const btnIcon = !!icon && !hasContent.value && variant !== 'primary' ? 'd-btn-icon' : '';
       const btnIconWrap = !!icon ? 'd-btn-icon-wrap' : '';
       return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
     });
diff --git a/packages/devui-vue/devui/gantt/src/gantt-tools/index.tsx b/packages/devui-vue/devui/gantt/src/gantt-tools/index.tsx
index 070283dcd2..2557914363 100644
--- a/packages/devui-vue/devui/gantt/src/gantt-tools/index.tsx
+++ b/packages/devui-vue/devui/gantt/src/gantt-tools/index.tsx
@@ -63,7 +63,7 @@ export default defineComponent({
         style={{ position: isFullScreen ? 'fixed' : 'absolute' }}
       >
         <d-button
-          btnStyle="common"
+          variant="common"
           onClick={() => actionHandle('today')}
           class="tool"
         >
@@ -77,7 +77,7 @@ export default defineComponent({
           ></d-select>
         </div>
         <d-button
-          btnStyle="common"
+          variant="common"
           class={[
             'tool',
             'minus',
@@ -89,7 +89,7 @@ export default defineComponent({
           <d-icon name="minus"></d-icon>
         </d-button>
         <d-button
-          btnStyle="common"
+          variant="common"
           class={[
             'tool',
             'add',
diff --git a/packages/devui-vue/devui/modal/src/dialog-types.ts b/packages/devui-vue/devui/modal/src/dialog-types.ts
index 75c09d49c6..dadbc7bb67 100644
--- a/packages/devui-vue/devui/modal/src/dialog-types.ts
+++ b/packages/devui-vue/devui/modal/src/dialog-types.ts
@@ -1,8 +1,8 @@
 import type { PropType, ExtractPropTypes } from 'vue'
-import { IButtonStyle } from '../../button/src/button'
+import { IButtonVariant } from '../../button'
 
 export interface ButtonOptions {
-  btnStyle: IButtonStyle
+  variant: IButtonVariant
   text: string
   disabled: boolean
   handler: ($event: Event) => void
diff --git a/packages/devui-vue/devui/modal/src/dialog.tsx b/packages/devui-vue/devui/modal/src/dialog.tsx
index c493aeac0b..787e3d8b36 100644
--- a/packages/devui-vue/devui/modal/src/dialog.tsx
+++ b/packages/devui-vue/devui/modal/src/dialog.tsx
@@ -65,12 +65,12 @@ export default defineComponent({
     // 处理按钮
     const buttonsRef = computed(() => {
       return props.buttons.map((buttonProps, index) => {
-        const { btnStyle, disabled, handler, text } = buttonProps;
+        const { variant, disabled, handler, text } = buttonProps;
         return (
           <Button
             key={index}
             style={{ display: 'inline-block', margin: '0 5px' }}
-            btnStyle={btnStyle}
+            variant={variant}
             disabled={disabled}
             onClick={handler}
           >
@@ -118,7 +118,7 @@ export default defineComponent({
             <Button
               class="btn-close"
               icon="close"
-              btnStyle="text-dark"
+              variant="text-dark"
               onClick={closeModal}
             />
           </div>
diff --git a/packages/devui-vue/devui/time-picker/src/components/time-popup/index.tsx b/packages/devui-vue/devui/time-picker/src/components/time-popup/index.tsx
index bba0cd3a19..8be6354235 100644
--- a/packages/devui-vue/devui/time-picker/src/components/time-popup/index.tsx
+++ b/packages/devui-vue/devui/time-picker/src/components/time-popup/index.tsx
@@ -99,7 +99,7 @@ export default defineComponent({
                   }
                 </div>
                 <div onClick={subDataFun}>
-                  <Button btnStyle="common">确定</Button>
+                  <Button variant="common">确定</Button>
                 </div>
                 
               </div>
diff --git a/packages/devui-vue/devui/tooltip/__tests__/tooltip.spec.ts b/packages/devui-vue/devui/tooltip/__tests__/tooltip.spec.ts
index 01a156c186..b8310e5989 100644
--- a/packages/devui-vue/devui/tooltip/__tests__/tooltip.spec.ts
+++ b/packages/devui-vue/devui/tooltip/__tests__/tooltip.spec.ts
@@ -11,7 +11,7 @@ const globalOption = {
     }
 }
 const defaultslot = {
-    default: '<d-button btnStyle="common">tooltip</d-button>'
+    default: '<d-button variant="common">tooltip</d-button>'
 }
 
 describe('tooltip', () => {
@@ -19,7 +19,7 @@ describe('tooltip', () => {
         jest.useFakeTimers();
     })
     describe('basic', () => {
-        it('should be create', async() => {
+        it('should be create', async () => {
             const wrapper = mount(Tooltip, {
                 props: {
                     content: 'content'
@@ -42,7 +42,7 @@ describe('tooltip', () => {
             tooltipElement = wrapper.element.querySelector('.tooltip') as HTMLElement;
             expect(tooltipElement.style.opacity).toBe('0');
         })
-        it('position should be left', async() => {
+        it('position should be left', async () => {
             const wrapper = mount(Tooltip, {
                 props: {
                     content: 'content',
@@ -59,7 +59,7 @@ describe('tooltip', () => {
             console.log(tooltipArrowElement.style);
             expect(tooltipArrowElement.style.borderLeft).toBe('5px solid rgb(70, 77, 110)');
         })
-        it('position should be top', async() => {
+        it('position should be top', async () => {
             const wrapper = mount(Tooltip, {
                 props: {
                     content: 'content',
@@ -76,7 +76,7 @@ describe('tooltip', () => {
             console.log(tooltipArrowElement.style);
             expect(tooltipArrowElement.style.borderTop).toBe('5px solid rgb(70, 77, 110)');
         })
-        it('position should be right', async() => {
+        it('position should be right', async () => {
             const wrapper = mount(Tooltip, {
                 props: {
                     content: 'content',
@@ -93,7 +93,7 @@ describe('tooltip', () => {
             console.log(tooltipArrowElement.style);
             expect(tooltipArrowElement.style.borderRight).toBe('5px solid rgb(70, 77, 110)');
         })
-        it('position should be bottom', async() => {
+        it('position should be bottom', async () => {
             const wrapper = mount(Tooltip, {
                 props: {
                     content: 'content',
@@ -112,7 +112,7 @@ describe('tooltip', () => {
         })
     })
     describe('delay time', () => {
-        it('test mouseEnterDelay', async() => {
+        it('test mouseEnterDelay', async () => {
             const wrapper = mount(Tooltip, {
                 props: {
                     content: 'content',
@@ -132,7 +132,7 @@ describe('tooltip', () => {
             tooltipElement = wrapper.element.querySelector('.tooltip') as HTMLElement;
             expect(tooltipElement.style.opacity).toBe('1');
         })
-        it('test mouseLeaveDelay', async() => {
+        it('test mouseLeaveDelay', async () => {
             const wrapper = mount(Tooltip, {
                 props: {
                     content: 'content',
@@ -157,7 +157,7 @@ describe('tooltip', () => {
             tooltipElement = wrapper.element.querySelector('.tooltip') as HTMLElement;
             expect(tooltipElement.style.opacity).toBe('0');
         })
-        
+
     })
 
 })
\ No newline at end of file
diff --git a/packages/devui-vue/devui/upload/src/single-upload.tsx b/packages/devui-vue/devui/upload/src/single-upload.tsx
index ff98a5c460..9dc88c0a9a 100644
--- a/packages/devui-vue/devui/upload/src/single-upload.tsx
+++ b/packages/devui-vue/devui/upload/src/single-upload.tsx
@@ -268,7 +268,7 @@ export default defineComponent({
           {!autoUpload && !withoutBtn && (
             <d-button
               style='marginLeft: 8px'
-              btnStyle='common'
+              variant='common'
               onClick={fileUpload}
               disabled={disabled || fileUploaders[0]?.status === UploadStatus.uploading}
             >
diff --git a/packages/devui-vue/devui/upload/src/upload.tsx b/packages/devui-vue/devui/upload/src/upload.tsx
index 8678147cf3..3cea263bf3 100644
--- a/packages/devui-vue/devui/upload/src/upload.tsx
+++ b/packages/devui-vue/devui/upload/src/upload.tsx
@@ -345,7 +345,7 @@ export default defineComponent({
           {!autoUpload && !withoutBtn && (
             <d-button
               style='marginLeft: 8px'
-              btnStyle='common'
+              variant='common'
               disabled={disabled}
               onClick={fileUpload}
             >
diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md
index 8566e717f4..76870fb7e2 100644
--- a/packages/devui-vue/docs/components/button/index.md
+++ b/packages/devui-vue/docs/components/button/index.md
@@ -23,8 +23,8 @@
 
 ```vue
 <template>
-  <d-button btnStyle="common" style="margin-right: 8px">Common</d-button>
-  <d-button btnStyle="common" :disabled="true">Disabled</d-button>
+  <d-button variant="common" style="margin-right: 8px">Common</d-button>
+  <d-button variant="common" :disabled="true">Disabled</d-button>
 </template>
 ```
 :::
@@ -34,26 +34,26 @@
 :::demo
 ```vue
 <template>
-  <d-button btnStyle="primary" bsPosition="left">Left</d-button>
-  <d-button btnStyle="common" bsPosition="right">Right</d-button>
+  <d-button variant="primary" bsPosition="left">Left</d-button>
+  <d-button variant="common" bsPosition="right">Right</d-button>
 </template>
 ```
 :::
 
 
 
-### 按钮风格
+### 按钮形态
 用于给按钮增加不同的使用场景。
 :::demo
 ```vue
 <template>
   <div class="flex flex-col space-y-xs">
-    <d-button btnStyle="primary" type="submit">主要按钮</d-button>
-    <d-button btnStyle="common" type="submit">通用按钮</d-button>
-    <d-button btnStyle="text" type="submit">文本按钮</d-button>
-    <d-button btnStyle="text-dark" type="submit">文本（暗色）按钮</d-button>
-    <d-button btnStyle="success" type="submit">成功按钮</d-button>
-    <d-button btnStyle="warning" type="submit">警告按钮</d-button>
+    <d-button variant="primary" type="submit">主要按钮</d-button>
+    <d-button variant="common" type="submit">通用按钮</d-button>
+    <d-button variant="text" type="submit">文本按钮</d-button>
+    <d-button variant="text-dark" type="submit">文本（暗色）按钮</d-button>
+    <d-button variant="success" type="submit">成功按钮</d-button>
+    <d-button variant="warning" type="submit">警告按钮</d-button>
   </div>
 </template>
 ```
@@ -63,9 +63,9 @@
 :::demo
 ```vue
 <template>
-  <d-button btnStyle="text" style="margin-right: 20px">Text</d-button>
-  <d-button btnStyle="text-dark" style="margin-right: 20px">Text dark</d-button>
-  <d-button btnStyle="text" :disabled="true">Disabled</d-button>
+  <d-button variant="text" style="margin-right: 20px">Text</d-button>
+  <d-button variant="text-dark" style="margin-right: 20px">Text dark</d-button>
+  <d-button variant="text" :disabled="true">Disabled</d-button>
 </template>
 ```
 :::
@@ -108,8 +108,8 @@
 :::demo
 ```vue
 <template>
-  <d-button btnStyle="primary" :bordered="true" :autofocus="true" style="margin-right: 8px"> Confirm </d-button>
-  <d-button btnStyle="common"> Cancel </d-button>
+  <d-button variant="primary" :bordered="true" :autofocus="true" style="margin-right: 8px"> Confirm </d-button>
+  <d-button variant="common"> Cancel </d-button>
 </template>
 ```
 :::
@@ -120,37 +120,37 @@
 ```vue
 <template>
   <div class="mb-l">
-    <d-button icon="add" btnStyle="primary"> New </d-button>
-    <d-button icon="filter" btnStyle="common"> Filter </d-button>
+    <d-button icon="add" variant="primary"> New </d-button>
+    <d-button icon="filter" variant="common"> Filter </d-button>
   </div>
   <div class="mb-l">
-    <d-button icon="add" btnStyle="primary" :disabled="true"> New(disabled) </d-button>
-    <d-button icon="filter" btnStyle="common" :disabled="true"> Filter(disabled) </d-button>
+    <d-button icon="add" variant="primary" :disabled="true"> New(disabled) </d-button>
+    <d-button icon="filter" variant="common" :disabled="true"> Filter(disabled) </d-button>
   </div>
   <div class="mb-l">
-    <d-button icon="connect" btnStyle="text-dark" style="margin-right: 4px"> Link </d-button>
-    <d-button icon="run" btnStyle="text-dark"> Run </d-button>
+    <d-button icon="connect" variant="text-dark" style="margin-right: 4px"> Link </d-button>
+    <d-button icon="run" variant="text-dark"> Run </d-button>
   </div>
   <div class="mb-l">
-    <d-button class="mr-xs" icon="connect" btnStyle="text-dark" style="margin-right: 4px" :disabled="true"> Link(disabled) </d-button>
-    <d-button class="mr-xs" icon="run" btnStyle="text-dark" :disabled="true"> Run(disabled) </d-button>
+    <d-button class="mr-xs" icon="connect" variant="text-dark" style="margin-right: 4px" :disabled="true"> Link(disabled) </d-button>
+    <d-button class="mr-xs" icon="run" variant="text-dark" :disabled="true"> Run(disabled) </d-button>
   </div>
   <div class="mb-l">
-    <d-button class="mr-xs" icon="add" btnStyle="text-dark" title="add"></d-button>
-    <d-button class="mr-xs" icon="delete" btnStyle="text-dark" title="delete"></d-button>
+    <d-button class="mr-xs" icon="add" variant="text-dark" title="add"></d-button>
+    <d-button class="mr-xs" icon="delete" variant="text-dark" title="delete"></d-button>
   </div>
   <div class="mb-l">
-    <d-button icon="add" btnStyle="text-dark" :disabled="true" title="add"></d-button>
-    <d-button icon="delete" btnStyle="text-dark" :disabled="true" title="delete"></d-button>
+    <d-button icon="add" variant="text-dark" :disabled="true" title="add"></d-button>
+    <d-button icon="delete" variant="text-dark" :disabled="true" title="delete"></d-button>
   </div>
   <div class="mb-l">
-    <d-button class="mr-xs" btnStyle="common" class="mr-xs" bsSize="xs">
+    <d-button class="mr-xs" variant="common" class="mr-xs" bsSize="xs">
       Click me
       <span class="icon-chevron-down"></span>
     </d-button>
   </div>
   <div class="mb-l">
-    <d-button class="mr-xs" btnStyle="text-dark">
+    <d-button class="mr-xs" variant="text-dark">
       Click me
       <span class="icon-chevron-down"></span>
     </d-button>
@@ -174,7 +174,7 @@ d-button 参数
 |   参数    |       类型        |   默认    | 说明                             |
 | :-------: | :---------------: | :-------: | :------------------------------- |
 |   type    |   `IButtonType`   | 'button'  | 可选，按钮类型                   |
-| btnStyle  |  `IButtonStyle`   | 'primary' | 可选，按钮风格                   |
+| variant  |  `IButtonVariant`   | 'primary' | 可选，按钮的形态                   |
 | position  | `IButtonPosition` | 'default' | 可选，按钮位置                   |
 |   size    |   `IButtonSize`   |   'md'    | 可选，按钮大小                   |
 | bordered  |     `boolean`     |   false   | 可选，是否有边框                 |
@@ -195,9 +195,9 @@ IButtonType
 type IButtonType = 'button' | 'submit' | 'reset';
 ```
 
-IButtonStyle 
+IButtonVariant 
 ``` typescript
-type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
+type IButtonVariant = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
 ```
 
 IButtonPosition 
diff --git a/packages/devui-vue/docs/components/color-picker/index.md b/packages/devui-vue/docs/components/color-picker/index.md
index 8e2f49be5f..0c8ee3cbbb 100644
--- a/packages/devui-vue/docs/components/color-picker/index.md
+++ b/packages/devui-vue/docs/components/color-picker/index.md
@@ -23,7 +23,7 @@
 
 ```vue
 <template>
-  <d-button btnStyle="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
+  <d-button variant="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
   <d-color-picker v-model="color" :show-alpha="show"></d-color-picker>
 </template>
 
@@ -82,7 +82,7 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-button btnStyle="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
+  <d-button variant="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
   <d-color-picker :show-history="show" v-model="color" mode="hsl"></d-color-picker>
 </template>
 
diff --git a/packages/devui-vue/docs/components/modal/index.md b/packages/devui-vue/docs/components/modal/index.md
index cda8937781..c6516f2e3e 100644
--- a/packages/devui-vue/docs/components/modal/index.md
+++ b/packages/devui-vue/docs/components/modal/index.md
@@ -29,11 +29,11 @@ export default defineComponent({
           ])
         ),
         buttons: [{
-          btnStyle: 'primary',
+          variant: 'primary',
           text: 'Ok',
           handler: () => result.hide(),
         }, {
-          btnStyle: 'common',
+          variant: 'common',
           text: 'Cancel',
           handler: () => result.hide()
         }]
@@ -73,7 +73,7 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-button btnStyle="common" @click="open">click me!</d-button>
+  <d-button variant="common" @click="open">click me!</d-button>
 </template>
 <script>
 import {ref, defineComponent, inject, onMounted, h} from 'vue';
@@ -95,7 +95,7 @@ export default defineComponent({
         beforeHidden: beforeHidden,
         backdropCloseable: true,
         buttons: [{
-          btnStyle: 'primary',
+          variant: 'primary',
           text: 'Save',
           handler: () => result.hide(),
         }]
@@ -112,14 +112,14 @@ export default defineComponent({
           backdropCloseable: false,
           dialogtype: 'warning',
           buttons: [{
-            btnStyle: 'primary',
+            variant: 'primary',
             text: 'Save',
             handler() {
               results.hide();
               resolve(true);
             }
           }, {
-            btnStyle: 'common',
+            variant: 'common',
             text: 'Cancel',
             handler() {
               results.hide();
@@ -145,10 +145,10 @@ export default defineComponent({
 ```vue
 <template>
   <div class="btn-group">
-    <d-button btnStyle="common" @click="open('success', '成功', 'Delete [Git] repository successfully.')">success</d-button>
-    <d-button btnStyle="common" @click="open('failed', '错误', 'It is failed. if you want to resolve it,please contact the supportor.')">fail</d-button>
-    <d-button btnStyle="common" @click="open('warning', '警告', 'Leaving this page!')">warning</d-button>
-    <d-button btnStyle="common" @click="open('info', '提示', 'You signed in with another tab or window. Reload to refresh your session.')">info</d-button>
+    <d-button variant="common" @click="open('success', '成功', 'Delete [Git] repository successfully.')">success</d-button>
+    <d-button variant="common" @click="open('failed', '错误', 'It is failed. if you want to resolve it,please contact the supportor.')">fail</d-button>
+    <d-button variant="common" @click="open('warning', '警告', 'Leaving this page!')">warning</d-button>
+    <d-button variant="common" @click="open('info', '提示', 'You signed in with another tab or window. Reload to refresh your session.')">info</d-button>
   </div>
 </template>
 <script>
@@ -163,7 +163,7 @@ export default defineComponent({
         dialogType: type,
         backdropCloseable: true,
         buttons: [{
-          btnStyle: 'primary',
+          variant: 'primary',
           text: 'Save',
           handler: () => result.hide(),
         }]
@@ -210,11 +210,11 @@ export default defineComponent({
           ])
         ),
         buttons: [{
-          btnStyle: 'primary',
+          variant: 'primary',
           text: 'Ok',
           handler: () => result.hide(),
         }, {
-          btnStyle: 'common',
+          variant: 'common',
           text: 'Cancel',
           handler: () => result.hide()
         }]
@@ -257,12 +257,12 @@ export default defineComponent({
           ])
         ),
         buttons: [{
-          btnStyle: 'primary',
+          variant: 'primary',
           text: 'Ok',
           autofocus: true,
           handler: () => result.hide(),
         }, {
-          btnStyle: 'common',
+          variant: 'common',
           text: 'Cancel',
           handler: () => result.hide()
         }]
@@ -302,11 +302,11 @@ export default defineComponent({
           ])
         ),
         buttons: [{
-          btnStyle: 'primary',
+          variant: 'primary',
           text: 'Ok',
           handler: () => result.hide(),
         }, {
-          btnStyle: 'common',
+          variant: 'common',
           text: 'Cancel',
           handler: () => result.hide()
         }]
diff --git a/packages/devui-vue/docs/components/popover/index.md b/packages/devui-vue/docs/components/popover/index.md
index c5652dcaab..71a3531186 100644
--- a/packages/devui-vue/docs/components/popover/index.md
+++ b/packages/devui-vue/docs/components/popover/index.md
@@ -12,32 +12,32 @@
 <div class="popover-demo-item" >
   <d-popover controlled>
     <template #reference>
-      <d-button btnStyle="common">default</d-button>
+      <d-button variant="common">default</d-button>
     </template>
   </d-popover>
   <d-popover  content="info!" popType="info" position="top" trigger="hover" controlled>
     <template #reference>
-      <d-button  btnStyle="primary">info</d-button>
+      <d-button  variant="primary">info</d-button>
     </template>
   </d-popover>
   <d-popover  content="error!" popType="error" controlled position="left" :zIndex="9999">
     <template #reference>
-      <d-button  btnStyle="danger">error</d-button>
+      <d-button  variant="danger">error</d-button>
     </template>
   </d-popover>
     <d-popover  content="success!" popType="success" controlled position="right">
     <template #reference>
-      <d-button  btnStyle="success">success</d-button>
+      <d-button  variant="success">success</d-button>
     </template>
   </d-popover>
   <d-popover  content="warning!" popType="warning" controlled>
     <template #reference>
-      <d-button  btnStyle="warning">warning</d-button>
+      <d-button  variant="warning">warning</d-button>
     </template>
   </d-popover>
   <d-popover  content="no-animation!" :showAnimation="false" :popMaxWidth="100" controlled>
     <template #reference>
-      <d-button  btnStyle="common">no-animation</d-button>
+      <d-button  variant="common">no-animation</d-button>
     </template>
   </d-popover>
 </div>
@@ -60,12 +60,12 @@
 <div class="popover-demo-item">
   <d-popover content="自定义内容" controlled>
     <template #reference>
-      <d-button btnStyle="primary"> click me!</d-button>
+      <d-button variant="primary"> click me!</d-button>
     </template>
   </d-popover>
   <d-popover  content="自定义内容" trigger="hover" :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}" controlled>
     <template #reference>
-      <d-button btnStyle="primary"> hover me!</d-button>
+      <d-button variant="primary"> hover me!</d-button>
     </template>
   </d-popover>
 </div>
@@ -93,7 +93,7 @@
       <div>left</div>
     </template>
   <template #reference>
-    <d-button btnStyle="common">left</d-button>
+    <d-button variant="common">left</d-button>
   </template>
   </d-popover>
   <d-popover  position="left-top" controlled>
@@ -102,7 +102,7 @@
         <div>left-top</div>
     </template>
     <template #reference>
-      <d-button btnStyle="common">left-top</d-button>
+      <d-button variant="common">left-top</d-button>
     </template>
   </d-popover>
   <d-popover  position="left-bottom" controlled >
@@ -111,7 +111,7 @@
         <div>left-bottom</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">left-bottom</d-button>
+      <d-button variant="common">left-bottom</d-button>
     </template>
   </d-popover>
 </div>
@@ -122,7 +122,7 @@
         <span >top</span>
       </template>
     <template #reference>
-      <d-button btnStyle="common">top</d-button>
+      <d-button variant="common">top</d-button>
     </template>
   </d-popover>
   <d-popover  position="top-left" controlled>
@@ -130,7 +130,7 @@
         <span >top-left</span>
       </template>
     <template #reference>
-      <d-button btnStyle="common">top-left</d-button>
+      <d-button variant="common">top-left</d-button>
     </template>
   </d-popover>
   <d-popover  position="top-right" controlled>
@@ -138,7 +138,7 @@
         <span >top-right</span>
       </template>
     <template #reference>
-      <d-button btnStyle="common">top-right</d-button>
+      <d-button variant="common">top-right</d-button>
     </template>
   </d-popover>
 </div>
@@ -149,7 +149,7 @@
         <div >right</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">right</d-button>
+      <d-button variant="common">right</d-button>
     </template>
   </d-popover>
   <d-popover   position="right-top" controlled>
@@ -158,7 +158,7 @@
         <div >right-top</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">right-top</d-button>
+      <d-button variant="common">right-top</d-button>
     </template>
   </d-popover>
     <d-popover  position="right-bottom" controlled>
@@ -167,7 +167,7 @@
         <div >right-bottom</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">right-bottom</d-button>
+      <d-button variant="common">right-bottom</d-button>
     </template>
   </d-popover>
 </div>
@@ -178,7 +178,7 @@
         <div >bottom</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">bottom</d-button>
+      <d-button variant="common">bottom</d-button>
     </template>
   </d-popover>
     <d-popover  position="bottom-left" controlled>
@@ -186,7 +186,7 @@
         <div >bottom-left</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">bottom-left</d-button>
+      <d-button variant="common">bottom-left</d-button>
     </template>
   </d-popover>
   <d-popover  position="bottom-right" controlled>
@@ -194,7 +194,7 @@
         <div >bottom-right</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">bottom-right</d-button>
+      <d-button variant="common">bottom-right</d-button>
     </template>
   </d-popover>
 </div>
@@ -220,7 +220,7 @@
         <div > 手动触发 </div>
       </template>
     <template #reference>
-      <d-button btnStyle="primary" @click="onClick">手动触发</d-button>
+      <d-button variant="primary" @click="onClick">手动触发</d-button>
     </template>
   </d-popover>
 </template>
@@ -258,7 +258,7 @@ export default defineComponent({
         show Me
       </template>
     <template #reference>
-      <d-button btnStyle="primary">MouseEnter delay 500ms</d-button>
+      <d-button variant="primary">MouseEnter delay 500ms</d-button>
     </template>
   </d-popover>
   <d-popover  position="bottom-right" trigger="hover" controlled :mouseLeaveDelay="2000">
@@ -266,7 +266,7 @@ export default defineComponent({
         <div> Mouse leave 2000ms later. </div>
       </template>
     <template #reference>
-      <d-button btnStyle="common"> MouseLeave delay 2000ms</d-button>
+      <d-button variant="common"> MouseLeave delay 2000ms</d-button>
     </template>
   </d-popover>
   </div>
diff --git a/packages/devui-vue/docs/components/ripple/index.md b/packages/devui-vue/docs/components/ripple/index.md
index 3bd30f57eb..2e8c32572e 100644
--- a/packages/devui-vue/docs/components/ripple/index.md
+++ b/packages/devui-vue/docs/components/ripple/index.md
@@ -95,16 +95,16 @@ Button 组件
 <template>
   <d-row>
     <d-col :span="6">
-      <d-button v-ripple="{duration: 0.5}" btnStyle="text" style="padding: 3px 8px;margin-right: 20px">Text</d-button>
+      <d-button v-ripple="{duration: 0.5}" variant="text" style="padding: 3px 8px;margin-right: 20px">Text</d-button>
     </d-col>
     <d-col :span="6">
-      <d-button v-ripple="{duration: 0.5}" btnStyle="text-dark" style="padding: 3px 8px;margin-right: 20px">Text dark</d-button>
+      <d-button v-ripple="{duration: 0.5}" variant="text-dark" style="padding: 3px 8px;margin-right: 20px">Text dark</d-button>
     </d-col>
         <d-col :span="6">
-      <d-button v-ripple="{duration: 0.5}" icon="add" btnStyle="text-dark" title="add"></d-button>
+      <d-button v-ripple="{duration: 0.5}" icon="add" variant="text-dark" title="add"></d-button>
     </d-col>
     <d-col :span="6">
-      <d-button v-ripple="{duration: 0.5}" icon="delete" btnStyle="text-dark" title="delete"></d-button>
+      <d-button v-ripple="{duration: 0.5}" icon="delete" variant="text-dark" title="delete"></d-button>
     </d-col>
   </d-row>
 </template>
diff --git a/packages/devui-vue/docs/components/steps-guide/index.md b/packages/devui-vue/docs/components/steps-guide/index.md
index 22cbf68727..5655799c42 100644
--- a/packages/devui-vue/docs/components/steps-guide/index.md
+++ b/packages/devui-vue/docs/components/steps-guide/index.md
@@ -11,9 +11,9 @@
 :::demo  
 ```vue
 <template>
-  <d-button btnStyle="common" class="step-1 ml-s" @click="handleClick(0)">Step 1</d-button>
-  <d-button btnStyle="common" class="step-2 ml-s" @click="handleClick(1)">Step 2</d-button>
-  <d-button btnStyle="common" class="step-3 ml-s" @click="handleClick(2)">Step 3</d-button>
+  <d-button variant="common" class="step-1 ml-s" @click="handleClick(0)">Step 1</d-button>
+  <d-button variant="common" class="step-2 ml-s" @click="handleClick(1)">Step 2</d-button>
+  <d-button variant="common" class="step-3 ml-s" @click="handleClick(2)">Step 3</d-button>
   <d-steps-guide ref="stepRef" :steps="steps" v-model:step-index="stepIndex" :step-change="handleStepChange" @guide-close="handleGuideClose"></d-steps-guide>
 </template>
 <script>
@@ -112,18 +112,18 @@
 ```vue
 <template>
   <div class="flex mb-s justify-center">
-    <d-button btnStyle="common" class="top-left ml-s" width="120px" @click="handleClick(0)">Top-left</d-button>
-    <d-button btnStyle="common" class="top ml-s" width="120px" @click="handleClick(1)">Top</d-button>
-    <d-button btnStyle="common" class="top-right ml-s" width="120px" @click="handleClick(2)">Top-right</d-button>
+    <d-button variant="common" class="top-left ml-s" width="120px" @click="handleClick(0)">Top-left</d-button>
+    <d-button variant="common" class="top ml-s" width="120px" @click="handleClick(1)">Top</d-button>
+    <d-button variant="common" class="top-right ml-s" width="120px" @click="handleClick(2)">Top-right</d-button>
   </div>
   <div class="flex mb-s justify-around">
-    <d-button btnStyle="common" class="left ml-s" width="120px" @click="handleClick(7)">Left</d-button>
-    <d-button btnStyle="common" class="right ml-s" width="120px" @click="handleClick(3)">Right</d-button>
+    <d-button variant="common" class="left ml-s" width="120px" @click="handleClick(7)">Left</d-button>
+    <d-button variant="common" class="right ml-s" width="120px" @click="handleClick(3)">Right</d-button>
   </div>
   <div class="flex mb-s justify-center">
-    <d-button btnStyle="common" class="bottom-left ml-s" width="120px" @click="handleClick(6)">Bottom-left</d-button>
-    <d-button btnStyle="common" class="bottom ml-s" width="120px" @click="handleClick(5)">Bottom</d-button>
-    <d-button btnStyle="common" class="bottom-right ml-s" width="120px" @click="handleClick(4)">Bottom-right</d-button>
+    <d-button variant="common" class="bottom-left ml-s" width="120px" @click="handleClick(6)">Bottom-left</d-button>
+    <d-button variant="common" class="bottom ml-s" width="120px" @click="handleClick(5)">Bottom</d-button>
+    <d-button variant="common" class="bottom-right ml-s" width="120px" @click="handleClick(4)">Bottom-right</d-button>
   </div>
   <d-steps-guide :steps="steps" v-model:step-index="stepIndex" ref="stepsRef"></d-steps-guide>
 </template>
@@ -196,8 +196,8 @@
 :::demo  
 ```vue
 <template>
-  <d-button btnStyle="common" class="ml-s">Custom Position</d-button>
-  <d-button btnStyle="common" class="ml-s">Custom Target</d-button>
+  <d-button variant="common" class="ml-s">Custom Position</d-button>
+  <d-button variant="common" class="ml-s">Custom Target</d-button>
   <d-steps-guide ref="stepsRef" :steps="customSteps" :showDots="false" :showClose="false"></d-steps-guide>
 </template>
 <script>
diff --git a/packages/devui-vue/docs/components/toast/index.md b/packages/devui-vue/docs/components/toast/index.md
index 4f63a0c8eb..04ff27c8ff 100644
--- a/packages/devui-vue/docs/components/toast/index.md
+++ b/packages/devui-vue/docs/components/toast/index.md
@@ -21,26 +21,26 @@ common 时不展示图标。
         >
       </template>
     </d-toast>
-    <d-button btnStyle="success" @click.native="showToast('success')"
+    <d-button variant="success" @click.native="showToast('success')"
       >Success</d-button
     >
-    <d-button btnStyle="warning" @click.native="showToast('warning')"
+    <d-button variant="warning" @click.native="showToast('warning')"
       >Warning</d-button
     >
-    <d-button btnStyle="danger" @click.native="showToast('error')"
+    <d-button variant="danger" @click.native="showToast('error')"
       >Error</d-button
     >
-    <d-button btnStyle="primary" @click.native="showToast('multiple')"
+    <d-button variant="primary" @click.native="showToast('multiple')"
       >Multiple</d-button
     >
-    <d-button btnStyle="common" @click.native="showToast('link')">link</d-button>
-    <d-button btnStyle="common" @click.native="showToast('plainText')"
+    <d-button variant="common" @click.native="showToast('link')">link</d-button>
+    <d-button variant="common" @click.native="showToast('plainText')"
       >pure text</d-button
     >
-    <d-button btnStyle="common" @click.native="showToast('common')"
+    <d-button variant="common" @click.native="showToast('common')"
       >common</d-button
     >
-    <d-button btnStyle="warning" @click.native="showToast('noTitle')"
+    <d-button variant="warning" @click.native="showToast('noTitle')"
       >no title</d-button
     >
   </section>
@@ -139,16 +139,16 @@ export default defineComponent({
 <template>
   <section class="toast-timeout-demo">
     <d-toast :life="5000" :value="msgs2"></d-toast>
-    <d-button btnStyle="success" @click.native="showToast2('success')"
+    <d-button variant="success" @click.native="showToast2('success')"
       >Success</d-button
     >
-    <d-button btnStyle="warning" @click.native="showToast2('warning')"
+    <d-button variant="warning" @click.native="showToast2('warning')"
       >Warning</d-button
     >
-    <d-button btnStyle="danger" @click.native="showToast2('error')"
+    <d-button variant="danger" @click.native="showToast2('error')"
       >Error</d-button
     >
-    <d-button btnStyle="common" @click.native="showToast2('common')"
+    <d-button variant="common" @click.native="showToast2('common')"
       >common</d-button
     >
   </section>
@@ -220,7 +220,7 @@ export default defineComponent({
       :style="{ top: '20px' }"
       :styleClass="'custom-class'"
     ></d-toast>
-    <d-button btnStyle="common" @click.stop="showToast3()"
+    <d-button variant="common" @click.stop="showToast3()"
       >Custom Style</d-button
     >
   </section>
@@ -297,7 +297,7 @@ export default defineComponent({
 <template>
   <section>
     <d-toast lifeMode="single" :value="msgs4"></d-toast>
-    <d-button btnStyle="common" @click.native="showToast4()">Single</d-button>
+    <d-button variant="common" @click.native="showToast4()">Single</d-button>
   </section>
 </template>
 <script>
@@ -360,13 +360,13 @@ export default defineComponent({
     <d-button @click.native="openToast()"
       >click me show simplest toast!</d-button
     >
-    <d-button v-if="!isShow" @click.native="openToast2()" btnStyle="common"
+    <d-button v-if="!isShow" @click.native="openToast2()" variant="common"
       >click me show customer toast!</d-button
     >
     <d-button v-if="isShow" @click.native="closeToast2()"
       >click me close customer toast!</d-button
     >
-    <d-button v-if="isShow" @click.native="closeToast3()" btnStyle="common"
+    <d-button v-if="isShow" @click.native="closeToast3()" variant="common"
       >only close first customer toast!</d-button
     >
   </div>
diff --git a/packages/devui-vue/docs/components/tooltip/index.md b/packages/devui-vue/docs/components/tooltip/index.md
index 8ae9d4829c..e12f72bc7e 100644
--- a/packages/devui-vue/docs/components/tooltip/index.md
+++ b/packages/devui-vue/docs/components/tooltip/index.md
@@ -14,19 +14,19 @@
 <template>
   <div class="tooltip-buttons">
     <d-tooltip position="left" content="I am a HTML Element!">
-      <d-button btnStyle="common">left</d-button>
+      <d-button variant="common">left</d-button>
     </d-tooltip>
     <d-tooltip position="top" content="I am a HTML Element!">
-      <d-button btnStyle="common">top</d-button>
+      <d-button variant="common">top</d-button>
     </d-tooltip>
     <d-tooltip position="bottom" content="I am a HTML Element!">
-      <d-button btnStyle="common">bottom</d-button>
+      <d-button variant="common">bottom</d-button>
     </d-tooltip>
     <d-tooltip position="right" content="I am a HTML Element!">
-      <d-button btnStyle="common">right</d-button>
+      <d-button variant="common">right</d-button>
     </d-tooltip>
     <d-tooltip content="No Animation" :showAnimation="false">
-      <d-button btnStyle="common">No Animation</d-button>
+      <d-button variant="common">No Animation</d-button>
     </d-tooltip>
   </div>
 </template>
@@ -63,7 +63,7 @@
     content="Mouse leave 1000ms later."
     mouseLeaveDelay="1000"
   >
-    <d-button btnStyle="common">MouseEnter delay 1000ms</d-button>
+    <d-button variant="common">MouseEnter delay 1000ms</d-button>
   </d-tooltip>
 </template>
 ```
diff --git a/packages/devui-vue/docs/en-US/components/popover/index.md b/packages/devui-vue/docs/en-US/components/popover/index.md
index 55add3765e..a5d93ef7a7 100644
--- a/packages/devui-vue/docs/en-US/components/popover/index.md
+++ b/packages/devui-vue/docs/en-US/components/popover/index.md
@@ -12,32 +12,32 @@ When Popover pops up, it is positioned based on the contents of the reference sl
 <div class="popover-demo-item" >
   <d-popover controlled>
     <template #reference>
-      <d-button btnStyle="common">default</d-button>
+      <d-button variant="common">default</d-button>
     </template>
   </d-popover>
   <d-popover  content="info!" popType="info" position="top" trigger="hover" controlled>
     <template #reference>
-      <d-button  btnStyle="primary">info</d-button>
+      <d-button  variant="primary">info</d-button>
     </template>
   </d-popover>
   <d-popover  content="error!" popType="error" controlled position="left" :zIndex="9999">
     <template #reference>
-      <d-button  btnStyle="danger">error</d-button>
+      <d-button  variant="danger">error</d-button>
     </template>
   </d-popover>
     <d-popover  content="success!" popType="success" controlled position="right">
     <template #reference>
-      <d-button  btnStyle="success">success</d-button>
+      <d-button  variant="success">success</d-button>
     </template>
   </d-popover>
   <d-popover  content="warning!" popType="warning" controlled>
     <template #reference>
-      <d-button  btnStyle="warning">warning</d-button>
+      <d-button  variant="warning">warning</d-button>
     </template>
   </d-popover>
   <d-popover  content="no-animation!" :showAnimation="false" :popMaxWidth="100" controlled>
     <template #reference>
-      <d-button  btnStyle="common">no-animation</d-button>
+      <d-button  variant="common">no-animation</d-button>
     </template>
   </d-popover>
 </div>
@@ -60,12 +60,12 @@ The HTMLElement or TemplateRef type can be transferred.
 <div class="popover-demo-item">
   <d-popover content="Custom Content" controlled>
     <template #reference>
-      <d-button btnStyle="primary"> click me!</d-button>
+      <d-button variant="primary"> click me!</d-button>
     </template>
   </d-popover>
   <d-popover  content="Custom Content" trigger="hover" controlled :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}">
     <template #reference>
-      <d-button btnStyle="primary"> hover me!</d-button>
+      <d-button variant="primary"> hover me!</d-button>
     </template>
   </d-popover>
 </div>
@@ -93,7 +93,7 @@ A total of 12 pop-up positions are supported.
       <div>left</div>
     </template>
   <template #reference>
-    <d-button btnStyle="common">left</d-button>
+    <d-button variant="common">left</d-button>
   </template>
   </d-popover>
   <d-popover  position="left-top" controlled>
@@ -102,7 +102,7 @@ A total of 12 pop-up positions are supported.
         <div>left-top</div>
     </template>
     <template #reference>
-      <d-button btnStyle="common">left-top</d-button>
+      <d-button variant="common">left-top</d-button>
     </template>
   </d-popover>
   <d-popover  position="left-bottom" controlled >
@@ -111,7 +111,7 @@ A total of 12 pop-up positions are supported.
         <div>left-bottom</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">left-bottom</d-button>
+      <d-button variant="common">left-bottom</d-button>
     </template>
   </d-popover>
 </div>
@@ -122,7 +122,7 @@ A total of 12 pop-up positions are supported.
         <span >top</span>
       </template>
     <template #reference>
-      <d-button btnStyle="common">top</d-button>
+      <d-button variant="common">top</d-button>
     </template>
   </d-popover>
   <d-popover  position="top-left" controlled>
@@ -130,7 +130,7 @@ A total of 12 pop-up positions are supported.
         <span >top-left</span>
       </template>
     <template #reference>
-      <d-button btnStyle="common">top-left</d-button>
+      <d-button variant="common">top-left</d-button>
     </template>
   </d-popover>
   <d-popover  position="top-right" controlled>
@@ -138,7 +138,7 @@ A total of 12 pop-up positions are supported.
         <span >top-right</span>
       </template>
     <template #reference>
-      <d-button btnStyle="common">top-right</d-button>
+      <d-button variant="common">top-right</d-button>
     </template>
   </d-popover>
 </div>
@@ -149,7 +149,7 @@ A total of 12 pop-up positions are supported.
         <div >right</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">right</d-button>
+      <d-button variant="common">right</d-button>
     </template>
   </d-popover>
   <d-popover   position="right-top" controlled>
@@ -158,7 +158,7 @@ A total of 12 pop-up positions are supported.
         <div >right-top</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">right-top</d-button>
+      <d-button variant="common">right-top</d-button>
     </template>
   </d-popover>
     <d-popover  position="right-bottom" controlled>
@@ -167,7 +167,7 @@ A total of 12 pop-up positions are supported.
         <div >right-bottom</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">right-bottom</d-button>
+      <d-button variant="common">right-bottom</d-button>
     </template>
   </d-popover>
 </div>
@@ -178,7 +178,7 @@ A total of 12 pop-up positions are supported.
         <div >bottom</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">bottom</d-button>
+      <d-button variant="common">bottom</d-button>
     </template>
   </d-popover>
     <d-popover  position="bottom-left" controlled>
@@ -186,7 +186,7 @@ A total of 12 pop-up positions are supported.
         <div >bottom-left</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">bottom-left</d-button>
+      <d-button variant="common">bottom-left</d-button>
     </template>
   </d-popover>
   <d-popover  position="bottom-right" controlled>
@@ -194,7 +194,7 @@ A total of 12 pop-up positions are supported.
         <div >bottom-right</div>
       </template>
     <template #reference>
-      <d-button btnStyle="common">bottom-right</d-button>
+      <d-button variant="common">bottom-right</d-button>
     </template>
   </d-popover>
 </div>
@@ -219,7 +219,7 @@ Displaying the pop-up dialog box through the visible interface to verify the for
         <div > Manual Control Display </div>
       </template>
     <template #reference>
-      <d-button btnStyle="primary" @click="onClick">Manual Control Display</d-button>
+      <d-button variant="primary" @click="onClick">Manual Control Display</d-button>
     </template>
   </d-popover>
 </template>
@@ -256,7 +256,7 @@ Only when the trigger type is hover. This event is triggered only when the mouse
         show Me
       </template>
     <template #reference>
-      <d-button btnStyle="primary">MouseEnter delay 500ms</d-button>
+      <d-button variant="primary">MouseEnter delay 500ms</d-button>
     </template>
   </d-popover>
   <d-popover  position="bottom-right" trigger="hover" controlled :mouseLeaveDelay="2000">
@@ -264,7 +264,7 @@ Only when the trigger type is hover. This event is triggered only when the mouse
         <div> Mouse leave 2000ms later. </div>
       </template>
     <template #reference>
-      <d-button btnStyle="common"> MouseLeave delay 2000ms</d-button>
+      <d-button variant="common"> MouseLeave delay 2000ms</d-button>
     </template>
   </d-popover>
   </div>
diff --git a/packages/devui-vue/docs/en-US/components/ripple/index.md b/packages/devui-vue/docs/en-US/components/ripple/index.md
index dfae7982b3..58f580b681 100644
--- a/packages/devui-vue/docs/en-US/components/ripple/index.md
+++ b/packages/devui-vue/docs/en-US/components/ripple/index.md
@@ -97,16 +97,16 @@ Button Component
 <template>
   <d-row>
     <d-col :span="6">
-      <d-button v-ripple="{duration: 0.5}" btnStyle="text" style="margin-right: 20px">Text</d-button>
+      <d-button v-ripple="{duration: 0.5}" variant="text" style="margin-right: 20px">Text</d-button>
     </d-col>
     <d-col :span="6">
-      <d-button v-ripple="{duration: 0.5}" btnStyle="text-dark" style="margin-right: 20px">Text dark</d-button>
+      <d-button v-ripple="{duration: 0.5}" variant="text-dark" style="margin-right: 20px">Text dark</d-button>
     </d-col>
         <d-col :span="6">
-      <d-button v-ripple="{duration: 0.5}" icon="add" btnStyle="text-dark" title="add"></d-button>
+      <d-button v-ripple="{duration: 0.5}" icon="add" variant="text-dark" title="add"></d-button>
     </d-col>
     <d-col :span="6">
-      <d-button v-ripple="{duration: 0.5}" icon="delete" btnStyle="text-dark" title="delete"></d-button>
+      <d-button v-ripple="{duration: 0.5}" icon="delete" variant="text-dark" title="delete"></d-button>
     </d-col>
   </d-row>
 </template>
diff --git a/packages/devui-vue/docs/en-US/components/tooltip/index.md b/packages/devui-vue/docs/en-US/components/tooltip/index.md
index 495cfc222d..42c45369fd 100644
--- a/packages/devui-vue/docs/en-US/components/tooltip/index.md
+++ b/packages/devui-vue/docs/en-US/components/tooltip/index.md
@@ -13,19 +13,19 @@ When users move the cursor to a text, they can see what should do next.
 <template>
   <div class="tooltip-buttons">
     <d-tooltip position="left" content="I am a HTML Element!">
-      <d-button btnStyle="common">left</d-button>
+      <d-button variant="common">left</d-button>
     </d-tooltip>
     <d-tooltip position="top" content="I am a HTML Element!">
-      <d-button btnStyle="common">top</d-button>
+      <d-button variant="common">top</d-button>
     </d-tooltip>
     <d-tooltip position="bottom" content="I am a HTML Element!">
-      <d-button btnStyle="common">bottom</d-button>
+      <d-button variant="common">bottom</d-button>
     </d-tooltip>
     <d-tooltip position="right" content="I am a HTML Element!">
-      <d-button btnStyle="common">right</d-button>
+      <d-button variant="common">right</d-button>
     </d-tooltip>
     <d-tooltip content="No Animation" :showAnimation="false">
-      <d-button btnStyle="common">No Animation</d-button>
+      <d-button variant="common">No Animation</d-button>
     </d-tooltip>
   </div>
 </template>
@@ -62,7 +62,7 @@ This event is triggered only when the mouse pointer is moved in for more than [m
     content="Mouse leave 1000ms later."
     mouseLeaveDelay="1000"
   >
-    <d-button btnStyle="common">MouseEnter delay 1000ms</d-button>
+    <d-button variant="common">MouseEnter delay 1000ms</d-button>
   </d-tooltip>
 </template>
 ```