diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss
index 1577e7abb8ba12e1b98083926dbc562cc86ab710..a29c626694bdd0af55201efcf946b13eed521209 100644
--- a/packages/devui-vue/devui/button/src/button.scss
+++ b/packages/devui-vue/devui/button/src/button.scss
@@ -56,6 +56,16 @@ $devui-btn-normal-config: (
     min-width: $devui-btn-min-width,
     background-color: $devui-contrast
   ),
+  success: (
+    color: $devui-light-text,
+    min-width: $devui-btn-min-width,
+    background-color: $devui-success
+  ),
+  warning: (
+    color: $devui-light-text,
+    min-width: $devui-btn-min-width,
+    background-color: $devui-warning
+  ),
   xs: (
     padding: $devui-btn-xs-padding,
     height: $devui-btn-xs-height,
@@ -172,7 +182,7 @@ $devui-btn-pseudo-config: (
   border-width: 1px;
   border-color: transparent;
   background-color: transparent;
-  @each $type in text, text-dark, common, stress, primary, danger, left, right, xs, sm, lg {
+  @each $type in text, text-dark, common, stress, primary, danger, success, warning, left, right, xs, sm, lg {
     &.devui-btn-#{$type} {
       @each $key, $value in map-get($devui-btn-normal-config, $type) {
         #{$key}: $value;
diff --git a/packages/devui-vue/devui/toast/src/toast-image.tsx b/packages/devui-vue/devui/toast/src/toast-image.tsx
index 2305693f11b5dc5ad8bffec6bb0f939ca4dfe9e1..9bf97f2f39ba36b3a8badd84105f217b0171026f 100644
--- a/packages/devui-vue/devui/toast/src/toast-image.tsx
+++ b/packages/devui-vue/devui/toast/src/toast-image.tsx
@@ -22,6 +22,6 @@ export default defineComponent({
 
     const showIcon = () => severity !== 'common'
 
-    return <span class={wrapperCls}>{showIcon() ? <Icon name={severityIconMap[severity]} size="14px" /> : null}</span>
+    return <span class={wrapperCls}>{showIcon() ? <Icon name={severityIconMap[severity]} size="16px" /> : null}</span>
   }
 })
diff --git a/packages/devui-vue/devui/toast/src/toast.scss b/packages/devui-vue/devui/toast/src/toast.scss
index 3f8c25127153904b0b75f22c09057057868c90cd..081257afca236b64ff3578c35116072946c12934 100644
--- a/packages/devui-vue/devui/toast/src/toast.scss
+++ b/packages/devui-vue/devui/toast/src/toast.scss
@@ -79,8 +79,9 @@
   height: 16px;
   border-radius: 50%;
   left: 16px;
-  top: 10px;
+  top: 14px;
   padding: 0;
+  line-height: 1;
 
   &.devui-toast-image-warn i.icon {
     color: $devui-warning !important;
diff --git a/packages/devui-vue/docs/components/toast/index.md b/packages/devui-vue/docs/components/toast/index.md
index 7c70fa94d906399ae889503967a98c70387b3370..4f63a0c8ebc0e06a93434e2f6ca360b56cdb9e1f 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 bsStyle="success" @click.native="showToast('success')"
+    <d-button btnStyle="success" @click.native="showToast('success')"
       >Success</d-button
     >
-    <d-button bsStyle="warning" @click.native="showToast('warn')"
+    <d-button btnStyle="warning" @click.native="showToast('warning')"
       >Warning</d-button
     >
-    <d-button bsStyle="danger" @click.native="showToast('error')"
+    <d-button btnStyle="danger" @click.native="showToast('error')"
       >Error</d-button
     >
-    <d-button bsStyle="primary" @click.native="showToast('multiple')"
+    <d-button btnStyle="primary" @click.native="showToast('multiple')"
       >Multiple</d-button
     >
-    <d-button bsStyle="common" @click.native="showToast('link')">link</d-button>
-    <d-button bsStyle="common" @click.native="showToast('plainText')"
+    <d-button btnStyle="common" @click.native="showToast('link')">link</d-button>
+    <d-button btnStyle="common" @click.native="showToast('plainText')"
       >pure text</d-button
     >
-    <d-button bsStyle="common" @click.native="showToast('common')"
+    <d-button btnStyle="common" @click.native="showToast('common')"
       >common</d-button
     >
-    <d-button bsStyle="warning" @click.native="showToast('noTitle')"
+    <d-button btnStyle="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 bsStyle="success" @click.native="showToast2('success')"
+    <d-button btnStyle="success" @click.native="showToast2('success')"
       >Success</d-button
     >
-    <d-button bsStyle="warning" @click.native="showToast2('warning')"
+    <d-button btnStyle="warning" @click.native="showToast2('warning')"
       >Warning</d-button
     >
-    <d-button bsStyle="danger" @click.native="showToast2('error')"
+    <d-button btnStyle="danger" @click.native="showToast2('error')"
       >Error</d-button
     >
-    <d-button bsStyle="common" @click.native="showToast2('common')"
+    <d-button btnStyle="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 bsStyle="common" @click.stop="showToast3()"
+    <d-button btnStyle="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 bsStyle="common" @click.native="showToast4()">Single</d-button>
+    <d-button btnStyle="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()" bsStyle="common"
+    <d-button v-if="!isShow" @click.native="openToast2()" btnStyle="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()" bsStyle="common"
+    <d-button v-if="isShow" @click.native="closeToast3()" btnStyle="common"
       >only close first customer toast!</d-button
     >
   </div>