diff --git a/packages/devui-vue/devui/button/src/button-types.ts b/packages/devui-vue/devui/button/src/button-types.ts
index 2c09d2a67a7acba6e928302bbefdd4776d1dce3e..e0e117e309952731704411b0d91d4589eff32917 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';
+export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
 export type IButtonPosition = 'left' | 'right' | 'default';
 export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
 
diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss
index 1577e7abb8ba12e1b98083926dbc562cc86ab710..eb1415eb01f912bb1f05570ab8369b7d21cd6eb2 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-dark-text,
+    min-width: $devui-btn-min-width,
+    background-color: $devui-success
+  ),
+  warning: (
+    color: $devui-dark-text,
+    min-width: $devui-btn-min-width,
+    background-color: $devui-warning
+  ),
   xs: (
     padding: $devui-btn-xs-padding,
     height: $devui-btn-xs-height,
@@ -160,6 +170,28 @@ $devui-btn-pseudo-config: (
     active: (
       background-color: $devui-contrast-active
     )
+  ),
+  success: (
+    hover: (
+      background-color: $devui-success-hover
+    ),
+    focus: (
+      background-color: $devui-success-hover
+    ),
+    active: (
+      background-color: $devui-success-active
+    )
+  ),
+  warning: (
+    hover: (
+      background-color: $devui-warning-hover
+    ),
+    focus: (
+      background-color: $devui-warning-hover
+    ),
+    active: (
+      background-color: $devui-warning-active
+    )
   )
 );
 
@@ -172,14 +204,14 @@ $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;
       }
     }
   }
-  @each $type in text, text-dark, common, stress, primary, danger {
+  @each $type in text, text-dark, common, stress, primary, danger, success, warning, {
     &.devui-btn-#{$type} {
       @each $pseudo, $value in map-get($devui-btn-pseudo-config, $type) {
         &:#{$pseudo} {
diff --git a/packages/devui-vue/devui/style/theme/_color.scss b/packages/devui-vue/devui/style/theme/_color.scss
index 3245ca181f88a7f63507ab347f49cc7e65710904..307debe65c7d83a20edaf2810285f11feb059365 100755
--- a/packages/devui-vue/devui/style/theme/_color.scss
+++ b/packages/devui-vue/devui/style/theme/_color.scss
@@ -26,8 +26,14 @@ $devui-block: var(--devui-block, #ffffff);                           // 大面
 $devui-area: var(--devui-area, #f8f8f8);                             // 可折叠区块的背景色（展开区域颜色）
 $devui-danger: var(--devui-danger, #f66f6a);                         // 失败、错误、告警
 $devui-warning: var(--devui-warning, #fac20a);                       // 警告、需注意类型提示
+$devui-warning-hover: var(--devui-warning, #fac20a);                 // 警告、需注意类型提示
+$devui-warning-active: var(--devui-warning, #fac20a);
+$devui-warning-active-focus: var(--devui-warning, #fac20a);
 $devui-waiting: var(--devui-waiting, #9faad7);                       // 等待中
 $devui-success: var(--devui-success, #50d4ab);                       // 成功、正确
+$devui-success-hover: var(--devui-warning, #50d4ab);                 // 成功、
+$devui-success-active: var(--devui-warning, #50d4ab);
+$devui-success-active-focus: var(--devui-warning, #50d4ab);
 $devui-info: var(--devui-info, #5e7ce0);                             // 通知、一般提示、执行中
 $devui-initial: var(--devui-initial, #e9edfa);                       // 初始化、未执行
 $devui-unavailable: var(--devui-unavailable, #f5f5f6);               // 不可用、禁用状态
diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md
index 3aa254acc163735d6d6e27b5c5b168b9b3259832..6129b78431137e66ff34c6d893457c107014dfce 100644
--- a/packages/devui-vue/docs/components/button/index.md
+++ b/packages/devui-vue/docs/components/button/index.md
@@ -51,6 +51,23 @@
 ```
 :::
 
+### 警示按钮
+用于标识系统中的关键操作，例如购买场景。
+:::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>
+  </div>
+</template>
+```
+:::
+
 ### 文字按钮
 用于标识系统中的关键操作，例如购买场景。
 :::demo
@@ -89,51 +106,44 @@
 :::demo
 ```vue
 <template>
-  <div class="btn-group">
+  <div class="mb-l">
     <d-button icon="add" btnStyle="primary"> New </d-button>
     <d-button icon="filter" btnStyle="common"> Filter </d-button>
   </div>
-  <div class="btn-group">
+  <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>
   </div>
-  <div class="btn-group">
+  <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>
   </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 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>
   </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 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>
   </div>
-  <div class="btn-group">
+  <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>
   </div>
-  <div class="btn-group">
-    <d-button btnStyle="common" class="rightIcon" bsSize="xs">
+  <div class="mb-l">
+    <d-button class="mr-xs" btnStyle="common" class="mr-xs" bsSize="xs">
       Click me
       <span class="icon-chevron-down"></span>
     </d-button>
   </div>
-  <div class="btn-group">
-    <d-button btnStyle="text-dark" class="rightIcon">
+  <div class="mb-l">
+    <d-button class="mr-xs" btnStyle="text-dark">
       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;
@@ -148,20 +158,40 @@
 
 ### 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   | 可选，按钮加载时是否自动获得焦点 |
+|   参数    |       类型        |   默认    | 说明                             |
+| :-------: | :---------------: | :-------: | :------------------------------- |
+|   type    |   `IButtonType`   | 'button'  | 可选，按钮类型                   |
+| btnStyle  |  `IButtonStyle`   | 'primary' | 可选，按钮风格                   |
+| position  | `IButtonPosition` | 'default' | 可选，按钮位置                   |
+|   size    |   `IButtonSize`   |   'md'    | 可选，按钮大小                   |
+| bordered  |     `boolean`     |   false   | 可选，是否有边框                 |
+|   icon    |     `string`      |    --     | 可选，点击背景触发的事件         |
+|   width   |     `string`      |    --     | 可选，弹出框宽度(e.g '300px')    |
+| disabled  |     `boolean`     |   false   | 可选，是否禁用button             |
+| autofocus |     `boolean`     |   false   | 可选，按钮加载时是否自动获得焦点 |
 
 d-button 事件
 |  参数   |             类型              | 默认  | 说明           |
 | :-----: | :---------------------------: | :---: | :------------- |
 | onClick | `(event: MouseEvent) => void` |  --   | 可选，点击事件 |
 
+
+IButtonType 
+``` typescript
+type IButtonStyle = 'button' | 'submit' | 'reset';
+```
+
+IButtonStyle 
+``` typescript
+type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
+```
+
+IButtonPosition 
+``` typescript
+type IButtonStyle = 'left' | 'right' | 'default';
+```
+
+IButtonSize
+``` typescript
+type IButtonStyle = 'lg' | 'md' | 'sm' | 'xs';
+```
\ No newline at end of file