diff --git a/packages/devui-vue/devui/button/src/button-types.ts b/packages/devui-vue/devui/button/src/button-types.ts
index 2c09d2a67a..e0e117e309 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 a29c626694..eb1415eb01 100644
--- a/packages/devui-vue/devui/button/src/button.scss
+++ b/packages/devui-vue/devui/button/src/button.scss
@@ -57,12 +57,12 @@ $devui-btn-normal-config: (
     background-color: $devui-contrast
   ),
   success: (
-    color: $devui-light-text,
+    color: $devui-dark-text,
     min-width: $devui-btn-min-width,
     background-color: $devui-success
   ),
   warning: (
-    color: $devui-light-text,
+    color: $devui-dark-text,
     min-width: $devui-btn-min-width,
     background-color: $devui-warning
   ),
@@ -170,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
+    )
   )
 );
 
@@ -189,7 +211,7 @@ $devui-btn-pseudo-config: (
       }
     }
   }
-  @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 3245ca181f..307debe65c 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 23204dabbe..8b8f6edba5 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
@@ -112,51 +129,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;
@@ -171,17 +181,17 @@
 
 ### API
 d-button 参数
-|   参数    |               类型                |   默认    | 说明                             |
-| :-------: | :-------------------------------: | :-------: | :------------------------------- |
-|   type    | `'button' \| 'submit' \| 'reset'` | '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   | 可选，按钮加载时是否自动获得焦点 |
+|   参数    |       类型        |   默认    | 说明                             |
+| :-------: | :---------------: | :-------: | :------------------------------- |
+|   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 事件
 |  参数   |             类型              | 默认  | 说明           |
@@ -189,17 +199,22 @@ d-button 事件
 | onClick | `(event: MouseEvent) => void` |  --   | 可选，点击事件 |
 
 
+IButtonType 
+``` typescript
+type IButtonStyle = 'button' | 'submit' | 'reset';
+```
+
 IButtonStyle 
-```typescript
+``` typescript
 type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
 ```
 
-IButtonSize
-```typescript
-type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
+IButtonPosition 
+``` typescript
+type IButtonStyle = 'left' | 'right' | 'default';
 ```
 
-IButtonPosition
-```typescript
-type IButtonPosition = 'left' | 'right' | 'default';
+IButtonSize
+``` typescript
+type IButtonStyle = 'lg' | 'md' | 'sm' | 'xs';
 ```