diff --git a/devui/button/src/button.scss b/devui/button/src/button.scss
index 93b28f7f8c1bf1225ef35b618abdb41d1c103cdb..1577e7abb8ba12e1b98083926dbc562cc86ab710 100644
--- a/devui/button/src/button.scss
+++ b/devui/button/src/button.scss
@@ -310,7 +310,7 @@ $devui-btn-pseudo-config: (
   }
 }
 
-:host {
+.devui-btn-host {
   display: inline-block;
 }
 
diff --git a/devui/button/src/button.tsx b/devui/button/src/button.tsx
index aaab4595c698faa000922071547d60225f395706..8c980b53e1899c8f76365efde6d3a21a8599d3a1 100644
--- a/devui/button/src/button.tsx
+++ b/devui/button/src/button.tsx
@@ -1,4 +1,5 @@
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent, ref, PropType } from 'vue';
+import { Icon } from '../../icon';
 
 export type IButtonType = 'button' | 'submit' | 'reset';
 export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger';
@@ -9,25 +10,21 @@ import './button.scss';
 
 export default defineComponent({
   name: 'DButton',
-  inheritAttrs: false,
   props: {
-    id: {
-      type: [String, Number]
-    },
     type: {
-      type: String as () => IButtonType,
+      type: String as PropType<IButtonType>,
       default: 'button'
     },
-    bsStyle: {
-      type: String as () => IButtonStyle,
+    btnStyle: {
+      type: String as PropType<IButtonStyle>,
       default: 'primary'
     },
-    bsSize: {
-      type: String as () => IButtonSize,
+    size: {
+      type: String as PropType<IButtonSize>,
       default: 'md'
     },
-    bsPosition: {
-      type: String as () => IButtonPosition,
+    position: {
+      type: String as PropType<IButtonPosition>,
       default: 'default'
     },
     bordered: {
@@ -43,8 +40,7 @@ export default defineComponent({
       default: false
     },
     width: {
-      type: Number,
-      default: null
+      type: String,
     },
     disabled: {
       type: Boolean,
@@ -54,38 +50,36 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    btnClick: {
-      type: Function as unknown as () => ((event: MouseEvent) => void)
+    onClick: {
+      type: Function as PropType<(event: MouseEvent) => void>
     }
   },
   setup(props, ctx) {
     const buttonContent = ref<HTMLSpanElement | null>(null);
-    
+
     const onClick = (e: MouseEvent) => {
       if (props.showLoading) {
         return;
       }
-      props.btnClick?.(e);
+      props.onClick?.(e);
     }
 
-    const hasContent = computed(() => {
-      return buttonContent.value && buttonContent.value.innerHTML.trim();
-    })
+    const hasContent = computed(() => ctx.slots.default);
 
-    const btnClazz = computed(() => {
-      const {bsStyle, bsSize, bsPosition, bordered, icon} = props;
-      const origin = `devui-btn devui-btn-${ bsStyle } devui-btn-${ bsSize } devui-btn-${ bsPosition }`;
+    const btnClass = computed(() => {
+      const { btnStyle, size, position, bordered, icon } = props;
+      const origin = `devui-btn devui-btn-${btnStyle} devui-btn-${size} devui-btn-${position}`;
       const broderedClazz = bordered ? 'bordered' : '';
-      const btnIcon = !!icon && !hasContent.value && bsStyle !== 'primary' ? 'd-btn-icon' : '';
+      const btnIcon = !!icon && !hasContent.value && btnStyle !== 'primary' ? 'd-btn-icon' : '';
       const btnIconWrap = !!icon ? 'd-btn-icon-wrap' : '';
       return `${origin} ${broderedClazz} ${btnIcon} ${btnIconWrap}`;
     });
 
-    const iconClazz = computed(() => {
+    const iconClass = computed(() => {
       if (!props.icon) {
         return;
       }
-      const origin = `devui-icon-fix icon ${ props.icon }`;
+      const origin = 'devui-icon-fix icon';
       if (hasContent.value) {
         return `${origin} clear-right-5`;
       } else {
@@ -96,30 +90,32 @@ export default defineComponent({
     return () => {
       const {
         icon,
-        type, 
-        disabled, 
+        type,
+        disabled,
         showLoading,
         width
       } = props;
       const hasIcon = !!icon;
       return (
-        <button 
-          class={btnClazz.value}
-          type={type}
-          disabled={disabled}
-          style={{ width: width }}
-          onClick={onClick}
-          {...ctx.attrs}
+        <div class="devui-btn-host">
+          <button
+            class={btnClass.value}
+            type={type}
+            disabled={disabled}
+            style={{ width: width }}
+            onClick={onClick}
+            {...ctx.attrs}
           // dLoading
           // [showLoading]="showLoading"
           // [loadingTemplateRef]="loadingTemplateRef"
           // [dAutoFocus]="autofocus"
-        >
-          {hasIcon ? (<span class={iconClazz.value} />) : null}
-          <span class="button-content" ref={buttonContent}>
-            {ctx.slots.default?.()}
-          </span>
-        </button>
+          >
+            {hasIcon ? (<Icon name={props.icon} class={iconClass.value} />) : null}
+            <span class="button-content" ref={buttonContent}>
+              {ctx.slots.default?.()}
+            </span>
+          </button>
+        </div>
       );
     }
   }
diff --git a/docs/components/button/index.md b/docs/components/button/index.md
index 82c6470e92b365bc20e4cefc8560d2b0621fbd1d..3aa254acc163735d6d6e27b5c5b168b9b3259832 100644
--- a/docs/components/button/index.md
+++ b/docs/components/button/index.md
@@ -8,20 +8,160 @@
 
 ### 主要按钮
 
-<d-button id="primaryBtn" style="margin-right: 8px">Primary</d-button>
-<d-button :disabled="true">Disabled</d-button>
+:::demo
 
-```html
-<d-button id="primaryBtn" style="margin-right: 8px">Primary</d-button>
-<d-button :disabled="true">Disabled</d-button>
+```vue
+<template>
+  <d-button id="primaryBtn" style="margin-right: 8px">Primary</d-button>
+  <d-button :disabled="true">Disabled</d-button>
+</template>
 ```
-
+:::
 ### 次要按钮
 
-<d-button bsStyle="common" style="margin-right: 8px">Common</d-button>
-<d-button bsStyle="common" :disabled="true">Disabled</d-button>
+:::demo
+
+```vue
+<template>
+  <d-button btnStyle="common" style="margin-right: 8px">Common</d-button>
+  <d-button btnStyle="common" :disabled="true">Disabled</d-button>
+</template>
+```
+:::
+
+### 左按钮与右按钮
+
+:::demo
+```vue
+<template>
+  <d-button btnStyle="primary" bsPosition="left">Left</d-button>
+  <d-button btnStyle="common" bsPosition="right">Right</d-button>
+</template>
+```
+:::
+
+
+### 警示按钮
+用于标识系统中的关键操作，例如购买场景。
+:::demo
+```vue
+<template>
+  <d-button btnStyle="danger" type="submit">Buy</d-button>
+</template>
+```
+:::
+
+### 文字按钮
+用于标识系统中的关键操作，例如购买场景。
+:::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>
+</template>
+```
+:::
+
+### 加载中状态
+（该功能正在开发中）
+:::demo
+```vue
+<template>
+  <d-button> click me! </d-button>
+</template>
+```
+:::
+
+### 自动获得焦点
+通过autofocus设置按钮自动获得焦点。
+:::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>
+</template>
+```
+:::
+
+### 图标
+
+:::demo
+```vue
+<template>
+  <div class="btn-group">
+    <d-button icon="add" btnStyle="primary"> New </d-button>
+    <d-button icon="filter" btnStyle="common"> Filter </d-button>
+  </div>
+  <div class="btn-group">
+    <d-button icon="add" btnStyle="primary" :disabled="true"> New(disabled) </d-button>
+    <d-button icon="filter" btnStyle="common" :disabled="true"> Filter(disabled) </d-button>
+  </div>
+  <div class="btn-group">
+    <d-button icon="connect" btnStyle="text-dark" style="margin-right: 4px"> Link </d-button>
+    <d-button icon="run" btnStyle="text-dark"> Run </d-button>
+  </div>
+  <div class="btn-group">
+    <d-button icon="connect" btnStyle="text-dark" style="margin-right: 4px" :disabled="true"> Link(disabled) </d-button>
+    <d-button icon="run" btnStyle="text-dark" :disabled="true"> Run(disabled) </d-button>
+  </div>
+  <div class="btn-group">
+    <d-button icon="add" btnStyle="text-dark" title="add"></d-button>
+    <d-button icon="delete" btnStyle="text-dark" title="delete"></d-button>
+  </div>
+  <div class="btn-group">
+    <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>
+  </div>
+  <div class="btn-group">
+    <d-button btnStyle="common" class="rightIcon" bsSize="xs">
+      Click me
+      <span class="icon-chevron-down"></span>
+    </d-button>
+  </div>
+  <div class="btn-group">
+    <d-button btnStyle="text-dark" class="rightIcon">
+      Click me
+      <span class="icon-chevron-down"></span>
+    </d-button>
+  </div>
+</template>
+<style>
+.btn-group {
+  margin-bottom: 20px;
+}
+
+.btn-group .devui-btn-host {
+  margin-right: 8px;
+}
+
+.icon-chevron-down {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  top: -0.1em;
+}
+
+</style>
+```
+:::
+
+### API
+d-button 参数
+|   参数    |                             类型                             |   默认    | 说明                             |
+| :-------: | :----------------------------------------------------------: | :-------: | :------------------------------- |
+|   type    |              `'button' \| 'submit' \| 'reset'`               | 'button'  | 可选，按钮类型                   |
+| btnStyle  | `'common' \| 'primary' \| 'text' \| 'text-dark' \| 'danger'` | 'primary' | 可选，按钮风格                   |
+| position  |               `'left' \| 'right' \| 'default'`               | 'default' | 可选，按钮位置                   |
+|   size    |                `'lg' \| 'md' \| 'sm' \| 'xs'`                |   'md'    | 可选，按钮大小                   |
+| bordered  |                          `boolean`                           |   false   | 可选，是否有边框                 |
+|   icon    |                           `string`                           |    --     | 可选，点击背景触发的事件         |
+|   width   |                           `string`                           |    --     | 可选，弹出框宽度(e.g '300px')    |
+| disabled  |                          `boolean`                           |   false   | 可选，是否禁用button             |
+| autofocus |                          `boolean`                           |   false   | 可选，按钮加载时是否自动获得焦点 |
+
+d-button 事件
+|  参数   |             类型              | 默认  | 说明           |
+| :-----: | :---------------------------: | :---: | :------------- |
+| onClick | `(event: MouseEvent) => void` |  --   | 可选，点击事件 |
 
-```html
-<d-button bsStyle="common" style="margin-right: 8px">Common</d-button>
-<d-button bsStyle="common" :disabled="true">Disabled</d-button>
-```
\ No newline at end of file