diff --git a/packages/devui-vue/devui/button/index.ts b/packages/devui-vue/devui/button/index.ts
index 91a9eb8d81..d2d44df9a1 100644
--- a/packages/devui-vue/devui/button/index.ts
+++ b/packages/devui-vue/devui/button/index.ts
@@ -1,21 +1,15 @@
-import type { App } from 'vue'
-import Button from './src/button'
-import { Loading } from '../loading/index'
+import type { App } from 'vue';
+import Button from './src/button';
 
-Button.install = function (app: App) {
-  app.directive('dLoading', Loading)
-  app.component(Button.name, Button)
-}
+export * from './src/button-types';
 
-export * from './src/button-types'
-
-export { Button }
+export { Button };
 
 export default {
   title: 'Button 按钮',
   category: '通用',
   status: '100%',
   install(app: App): void {
-    app.use(Button as any)
-  }
-}
+    app.component(Button.name, Button);
+  },
+};
diff --git a/packages/devui-vue/devui/button/src/button-types.ts b/packages/devui-vue/devui/button/src/button-types.ts
index 81317ec17d..f489e4beb8 100644
--- a/packages/devui-vue/devui/button/src/button-types.ts
+++ b/packages/devui-vue/devui/button/src/button-types.ts
@@ -1,54 +1,40 @@
-import { ExtractPropTypes, PropType } from 'vue';
+import type { ComputedRef, ExtractPropTypes, PropType } from 'vue';
 
-export type IButtonType = 'button' | 'submit' | 'reset';
-export type IButtonVariant = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
-export type IButtonPosition = 'left' | 'right' | 'default';
+export type IButtonVariant = 'solid' | 'outline' | 'text';
+export type IButtonColor = 'secondary' | 'primary' | 'danger';
 export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
 
 export const buttonProps = {
-  type: {
-    type: String as PropType<IButtonType>,
-    default: 'button'
-  },
   variant: {
     type: String as PropType<IButtonVariant>,
-    default: 'primary'
+    default: 'outline',
   },
   size: {
     type: String as PropType<IButtonSize>,
-    default: 'md'
-  },
-  position: {
-    type: String as PropType<IButtonPosition>,
-    default: 'default'
+    default: 'md',
   },
-  bordered: {
-    type: Boolean,
-    default: false
+  color: {
+    type: String as PropType<IButtonColor>,
   },
   icon: {
     type: String,
-    default: ''
+    default: '',
   },
-  showLoading: {
+  loading: {
     type: Boolean,
-    default: false
-  },
-  width: {
-    type: String,
+    default: false,
   },
   disabled: {
     type: Boolean,
-    default: false
-  },
-  autofocus: {
-    type: Boolean,
-    default: false
+    default: false,
   },
-  onClick: {
-    type: Function as PropType<(event: MouseEvent) => void>
-  }
 } as const;
 
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
 
-export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
\ No newline at end of file
+export interface UseButtonReturnType {
+  classes: ComputedRef<{
+    [key: string]: string | boolean;
+  }>;
+  iconClass: ComputedRef<string>;
+}
diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss
index eb1415eb01..9287577fa1 100644
--- a/packages/devui-vue/devui/button/src/button.scss
+++ b/packages/devui-vue/devui/button/src/button.scss
@@ -4,303 +4,236 @@
 @import '../../style/theme/font';
 @import '../../style/theme/corner';
 
-$devui-btn-loading-color: $devui-text;
-$devui-btn-xs-padding: 1px 5px;
-$devui-btn-xs-height: 24px;
-$devui-btn-icon-xs-min-width: 24px;
-$devui-btn-xs-min-width: 48px;
-$devui-btn-sm-padding: 1px 15px;
-$devui-btn-sm-min-width: 56px;
-$devui-btn-icon-sm-min-width: 24px;
-$devui-btn-sm-height: 24px;
-$devui-btn-min-width: 64px;
-$devui-btn-height: 28px;
-$devui-btn-padding: 3px 20px;
-$devui-btn-lg-padding: 5px 23px;
-$devui-btn-lg-min-width: 72px;
-$devui-btn-icon-lg-min-width: 32px;
-$devui-btn-lg-height: 32px;
-$devui-btn-xs-font-size: $devui-font-size-sm;
-$devui-btn-sm-font-size: $devui-font-size-sm;
-$devui-btn-font-size: $devui-font-size-md;
-$devui-btn-lg-font-size: $devui-font-size-lg;
-$devui-btn-line-height: $devui-line-height-base;
-
-$devui-btn-normal-config: (
-  text: (
-    color: $devui-brand-active,
-    padding: 0
-  ),
-  text-dark: (
-    color: $devui-brand-active,
-    padding: 0
-  ),
-  common: (
-    color: $devui-text,
-    min-width: $devui-btn-min-width,
-    background-color: $devui-block,
-    border-color: $devui-line
-  ),
-  stress: (
-    color: $devui-light-text,
-    min-width: $devui-btn-min-width,
-    background-color: $devui-primary
-  ),
-  primary: (
-    color: $devui-light-text,
-    min-width: $devui-btn-min-width,
-    background-color: $devui-primary
-  ),
-  danger: (
-    color: $devui-light-text,
-    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,
-    font-size: $devui-btn-xs-font-size,
-    min-width: $devui-btn-xs-min-width
-  ),
-  sm: (
-    padding: $devui-btn-sm-padding,
-    height: $devui-btn-sm-height,
-    font-size: $devui-btn-sm-font-size,
-    min-width: $devui-btn-sm-min-width,
-  ),
-  lg: (
-    padding: $devui-btn-lg-padding,
-    height: $devui-btn-lg-height,
-    font-size: $devui-btn-lg-font-size,
-    min-width: $devui-btn-lg-min-width,
-  ),
-  left: (
-    border-radius: $devui-border-radius 0 0 $devui-border-radius,
-  ),
-  right: (
-    border-radius: 0 $devui-border-radius $devui-border-radius 0,
-  ),
-  default: (
-    border-radius: $devui-border-radius,
-  )
-);
-
-$devui-btn-pseudo-config: (
-  text: (
-    hover: (
-      background-color: transparent,
-      color: $devui-brand-active-focus
-    ),
-    focus: (
-      background-color: transparent,
-      color: $devui-brand-active-focus
-    ),
-    active: (
-      background-color: transparent,
-      color: $devui-brand-active-focus
-    )
-  ),
-  text-dark: (
-    hover: (
-      background-color: transparent,
-      color: $devui-brand-active-focus
-    ),
-    focus: (
-      background-color: transparent,
-      color: $devui-brand-active-focus
-    ),
-    active: (
-      background-color: transparent,
-      color: $devui-brand-active-focus
-    )
-  ),
-  common: (
-    hover: (
-      border-color: $devui-form-control-line-active,
-      color: $devui-brand-active
-    ),
-    focus: (
-      border-color: $devui-form-control-line-active,
-      color: $devui-brand-active
-    ),
-    active: (
-      border-color: $devui-form-control-line-active,
-      color: $devui-brand-active
-    )
-  ),
-  stress: (
-    hover: (
-      background-color: $devui-primary-hover
-    ),
-    focus: (
-      background-color: $devui-primary-hover
-    ),
-    active: (
-      background-color: $devui-primary-active
-    )
-  ),
-  primary: (
-    hover: (
-      background-color: $devui-primary-hover
-    ),
-    focus: (
-      background-color: $devui-primary-hover
-    ),
-    active: (
-      background-color: $devui-primary-active
-    )
-  ),
-  danger: (
-    hover: (
-      background-color: $devui-contrast-hover
-    ),
-    focus: (
-      background-color: $devui-contrast-hover
-    ),
-    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
-    )
-  )
-);
-
 .devui-btn {
-  padding: $devui-btn-padding;
-  font-size: $devui-btn-font-size;
-  height: $devui-btn-height;
-  line-height: $devui-btn-line-height;
+  padding: 0 20px;
+  font-size: $devui-font-size-md;
+  height: 28px;
+  line-height: $devui-line-height-base;
+  border: none;
   border-radius: $devui-border-radius;
   border-width: 1px;
-  border-color: transparent;
   background-color: transparent;
-  @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;
-      }
-    }
+
+  &:hover {
+    cursor: pointer;
   }
-  @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} {
-          @each $key, $value2 in map-get(map-get($devui-btn-pseudo-config, $type), $pseudo) {
-            #{$key}: $value2;
-          }
-        }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &-solid {
+    color: $devui-light-text;
+    min-width: 64px;
+
+    &-secondary {
+      color: $devui-text;
+      background-color: $devui-dividing-line;
+
+      &:hover {
+        opacity: 0.8;
+      }
+
+      &:focus {
+        opacity: 0.8;
+      }
+
+      &:active {
+        opacity: 0.8;
+      }
+
+      &:disabled {
+        opacity: 0.8;
       }
     }
-  }
 
-  &.devui-btn-common {
-    &:disabled {
-      color: $devui-disabled-text;
-      background: $devui-disabled-bg;
-      border: 1px solid $devui-disabled-line;
+    &-primary {
+      background-color: $devui-primary;
+
+      &:hover {
+        background-color: $devui-primary-hover;
+      }
+
+      &:focus {
+        background-color: $devui-primary-hover;
+      }
+
+      &:active {
+        background-color: $devui-primary-active;
+      }
+
+      &:disabled {
+        color: $devui-light-text;
+        background: $devui-primary-disabled;
+        border: none;
+      }
     }
-  }
 
-  &.devui-btn-primary {
-    &:disabled {
-      color: $devui-light-text;
-      background: $devui-primary-disabled;
-      border: none;
+    &-danger {
+      background-color: $devui-contrast;
+
+      &:hover {
+        background-color: $devui-contrast-hover;
+      }
+
+      &:focus {
+        background-color: $devui-contrast-hover;
+      }
+
+      &:active {
+        background-color: $devui-contrast-active;
+      }
+
+      &:disabled {
+        background-color: $devui-contrast-disabled;
+      }
     }
   }
 
-  &.devui-btn-danger {
-    &:disabled {
-      color: $devui-disabled-text;
-      background: $devui-disabled-bg;
-      border: 1px solid $devui-disabled-line;
+  &-outline {
+    background-color: $devui-block;
+    border-style: solid;
+
+    &-secondary {
+      color: $devui-text;
+      border-color: $devui-line;
+
+      &:hover {
+        color: $devui-brand-active;
+        border-color: $devui-form-control-line-active;
+      }
+
+      &:focus {
+        color: $devui-brand-active;
+        border-color: $devui-form-control-line-active;
+      }
+
+      &:active {
+        color: $devui-brand-active;
+        border-color: $devui-form-control-line-active;
+      }
+
+      &:disabled {
+        color: $devui-disabled-text;
+        border-color: $devui-disabled-line;
+        background-color: $devui-disabled-bg;
+      }
     }
-  }
 
-  &.devui-btn-text-dark {
-    &:disabled {
-      color: $devui-disabled-text;
+    &-primary {
+      color: $devui-brand-active;
+      border-color: $devui-form-control-line-active;
+
+      &:hover {
+        color: $devui-brand-active-focus;
+        border-color: $devui-form-control-line-active-hover;
+      }
+
+      &:focus {
+        color: $devui-brand-active-focus;
+        border-color: $devui-form-control-line-active-hover;
+      }
+
+      &:active {
+        color: $devui-brand-active-focus;
+        border-color: $devui-form-control-line-active-hover;
+      }
+
+      &:disabled {
+        opacity: 0.8;
+      }
     }
-  }
 
-  &.devui-btn-text {
-    &:disabled {
-      color: $devui-disabled-text;
+    &-danger {
+      color: $devui-contrast;
+      border-color: $devui-contrast;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &:disabled {
+        opacity: 0.8;
+      }
     }
   }
 
-  &.bordered {
-    &.devui-btn-common {
+  &-text {
+    padding: 0;
+
+    &-secondary {
       color: $devui-text;
-      border-color: transparent;
 
-      &:hover,
+      &:hover {
+        color: $devui-list-item-hover-text;
+      }
+
       &:focus {
-        border-color: $devui-primary-hover;
+        color: $devui-list-item-hover-text;
       }
 
       &:active {
-        border-color: $devui-primary-active;
+        color: $devui-list-item-hover-text;
       }
-    }
 
-    &.devui-btn-stress,
-    &.devui-btn-primary {
-      border-color: $devui-brand;
-      color: $devui-brand;
-      background-color: $devui-block;
+      &:disabled {
+        color: $devui-disabled-text;
+      }
     }
 
-    &.devui-btn-success {
-      border-color: $devui-success;
-      color: $devui-success;
-      background-color: $devui-block;
-    }
+    &-primary {
+      color: $devui-brand-active;
+
+      &:hover {
+        color: $devui-brand-active-focus;
+      }
 
-    &.devui-btn-warning {
-      border-color: $devui-warning;
-      color: $devui-warning;
-      background-color: $devui-block;
+      &:focus {
+        color: $devui-brand-active-focus;
+      }
+
+      &:active {
+        color: $devui-brand-active-focus;
+      }
+
+      &:disabled {
+        opacity: 0.8;
+      }
     }
 
-    &.devui-btn-danger {
-      border-color: $devui-danger;
-      color: $devui-danger;
-      background-color: $devui-block;
+    &-danger {
+      color: $devui-contrast;
+
+      &:hover,
+      &:focus,
+      &:active,
+      &:disabled {
+        opacity: 0.8;
+      }
     }
   }
 
-  &.d-btn-icon {
+  &-xs {
+    padding: 0 4px;
+    height: 24px;
+    font-size: $devui-font-size-sm;
+    min-width: 48px;
+  }
+
+  &-sm {
+    padding: 0 16px;
+    height: 24px;
+    font-size: $devui-font-size-sm;
+    min-width: 56px;
+  }
+
+  &-lg {
+    padding: 0 24px;
+    height: 32px;
+    font-size: $devui-font-size-lg;
+    min-width: 72px;
+  }
+
+  &.devui-btn-icon {
     &:hover,
     &:focus {
       border: 1px solid $devui-list-item-hover-bg;
@@ -313,9 +246,8 @@ $devui-btn-pseudo-config: (
   }
 
   &:not(:disabled) {
-    &.devui-btn-text,
-    &.devui-btn-text-dark {
-      &.d-btn-icon-wrap {
+    &.devui-btn-text {
+      &.devui-btn-icon-wrap {
         color: $devui-text;
 
         .devui-icon-fix {
@@ -342,39 +274,29 @@ $devui-btn-pseudo-config: (
   }
 }
 
-.devui-btn-host {
-  display: inline-block;
-}
-
 .devui-btn {
   transition: background-color 0.2s;
-  border-style: solid;
   white-space: nowrap;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  &:disabled,
-  &[disabled] {
-    cursor: not-allowed;
-  }
-
-  &.d-btn-icon {
-    padding: 7px 8px;
+  &.devui-btn-icon {
+    padding: 8px;
     line-height: 1em;
     border: 1px solid transparent;
 
     &.devui-btn-xs,
     &.devui-btn-sm {
-      padding: 5px;
+      padding: 4px;
     }
 
     &.devui-btn-xs {
-      min-width: $devui-btn-icon-xs-min-width;
+      min-width: 24px;
     }
 
     &.devui-btn-sm {
-      min-width: $devui-btn-icon-sm-min-width;
+      min-width: 24px;
     }
 
     &.devui-btn-lg {
@@ -382,11 +304,11 @@ $devui-btn-pseudo-config: (
         font-size: $devui-font-size-icon;
       }
 
-      min-width: $devui-btn-icon-lg-min-width;
+      min-width: 32px;
     }
   }
 
-  &:not(.d-btn-icon) {
+  &:not(.devui-btn-icon) {
     .icon-fix {
       font-size: $devui-font-size-icon;
     }
@@ -398,20 +320,6 @@ $devui-btn-pseudo-config: (
   font-size: $devui-font-size;
 }
 
-.devui-btn.devui-btn-common:not(:disabled) {
-  .devui-icon-fix {
-    color: $devui-text-weak;
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    .devui-icon-fix {
-      color: $devui-icon-fill-active;
-    }
-  }
-}
-
 .button-content {
   display: inline-block;
   position: relative;
diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx
index 5a08a4c839..58e50f20a8 100644
--- a/packages/devui-vue/devui/button/src/button.tsx
+++ b/packages/devui-vue/devui/button/src/button.tsx
@@ -1,79 +1,36 @@
-import { computed, defineComponent, ref } from 'vue';
+import { defineComponent, toRefs } from 'vue';
+import type { SetupContext } from 'vue';
 import { Icon } from '../../icon';
 import loadingDirective from '../../loading/src/directive';
-import { buttonProps } from './button-types';
-
+import { buttonProps, ButtonProps } from './button-types';
+import useButton from './use-button';
 import './button.scss';
 
 export default defineComponent({
   name: 'DButton',
   directives: {
-    devLoading: loadingDirective
+    devLoading: loadingDirective,
   },
   props: buttonProps,
-  setup(props, ctx) {
-    const buttonContent = ref<HTMLSpanElement | null>(null);
+  emits: ['click'],
+  setup(props: ButtonProps, ctx: SetupContext) {
+    const { icon, disabled, loading } = toRefs(props);
+    const { classes, iconClass } = useButton(props, ctx);
 
     const onClick = (e: MouseEvent) => {
-      if (props.showLoading) {
-        return;
-      }
-      props.onClick?.(e);
-    }
-
-    const hasContent = computed(() => ctx.slots.default);
-
-    const btnClass = computed(() => {
-      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 && variant !== 'primary' ? 'd-btn-icon' : '';
-      const btnIconWrap = !!icon ? 'd-btn-icon-wrap' : '';
-      return `${origin} ${borderedClass} ${btnIcon} ${btnIconWrap}`;
-    });
-
-    const iconClass = computed(() => {
-      if (!props.icon) {
+      if (loading.value) {
         return;
       }
-      const origin = 'devui-icon-fix icon';
-      if (hasContent.value) {
-        return `${origin} clear-right-5`;
-      } else {
-        return origin;
-      }
-    });
+      ctx.emit('click', e);
+    };
 
     return () => {
-      const {
-        icon,
-        type,
-        disabled,
-        showLoading,
-        width
-      } = props;
       return (
-        <div 
-          class="devui-btn-host" 
-          {...ctx.attrs} 
-        >
-          <button
-            class={btnClass.value}
-            type={type}
-            disabled={disabled}
-            style={{ width }}
-            onClick={onClick}
-            v-devLoading={showLoading}
-          >
-            {!!icon ? (
-              <Icon name={icon} class={iconClass.value} />
-            ) : null}
-            <span class="button-content" ref={buttonContent}>
-              {ctx.slots.default?.()}
-            </span>
-          </button>
-        </div>
+        <button class={classes.value} disabled={disabled.value} v-dLoading={loading.value} onClick={onClick}>
+          {icon.value && <Icon name={icon.value} size='12px' class={iconClass.value} />}
+          <span class='button-content'>{ctx.slots.default?.()}</span>
+        </button>
       );
-    }
-  }
+    };
+  },
 });
diff --git a/packages/devui-vue/devui/button/src/use-button.ts b/packages/devui-vue/devui/button/src/use-button.ts
new file mode 100644
index 0000000000..a27c458832
--- /dev/null
+++ b/packages/devui-vue/devui/button/src/use-button.ts
@@ -0,0 +1,35 @@
+import { computed } from 'vue';
+import type { SetupContext } from 'vue';
+import { ButtonProps, UseButtonReturnType } from './button-types';
+
+export default function useButton(props: ButtonProps, ctx: SetupContext): UseButtonReturnType {
+  const hasContent = computed(() => ctx.slots.default);
+  const colorMap = {
+    solid: 'primary',
+    outline: 'secondary',
+    text: 'secondary',
+  };
+  const defaultColor = colorMap[props.variant];
+
+  const classes = computed(() => ({
+    'devui-btn': true,
+    [`devui-btn-${props.variant}`]: true,
+    [`devui-btn-${props.variant}-${props.color || defaultColor}`]: true,
+    [`devui-btn-${props.size}`]: true,
+    'devui-btn-icon-wrap': props.icon,
+    'devui-btn-icon': props.icon && !hasContent.value && props.variant !== 'solid',
+  }));
+  const iconClass = computed(() => {
+    if (!props.icon) {
+      return;
+    }
+    const origin = 'devui-icon-fix icon';
+    if (hasContent.value) {
+      return `${origin} clear-right-5`;
+    } else {
+      return origin;
+    }
+  });
+
+  return { classes, iconClass };
+}
diff --git a/packages/devui-vue/devui/style/theme/_color.scss b/packages/devui-vue/devui/style/theme/_color.scss
index 20ed2842ea..e78d335685 100755
--- a/packages/devui-vue/devui/style/theme/_color.scss
+++ b/packages/devui-vue/devui/style/theme/_color.scss
@@ -8,7 +8,7 @@ $devui-brand-foil: var(--devui-brand-foil, #859bff);                 // 品牌
 $devui-brand-hover: var(--devui-brand-hover, #7693f5);               // 品牌色高亮色（加亮）
 $devui-brand-active: var(--devui-brand-active, #526ecc);             // 品牌色激活色（加深）
 $devui-brand-active-focus: var(--devui-brand-active-focus, #344899); // 品牌色焦点色（重度加深）
-$devui-contrast: var(--devui-contrast, #f66f6a);                     // 品牌色撞色、对比色、反衬色、第二品牌色
+$devui-contrast: var(--devui-contrast, #c7000b);                     // 品牌色撞色、对比色、反衬色、第二品牌色
 $devui-text: var(--devui-text, #252b3a);                             // 正文文本
 $devui-text-weak: var(--devui-text-weak, #575d6c);                   // 弱化的正文信息（手风琴子项，表头）
 $devui-aide-text: var(--devui-aide-text, #8a8e99);                   // 辅助文本、帮助信息（面包屑）
@@ -84,8 +84,9 @@ $devui-primary: var(--devui-primary, #5e7ce0);                // 主要按钮，
 $devui-primary-hover: var(--devui-primary-hover, #7693f5);    // 主要按钮悬停
 $devui-primary-active: var(--devui-primary-active, #344899);  // 主要按钮激活
 
-$devui-contrast-hover: var(--devui-contrast-hover, #ff8b87);  // 突出按钮悬停
-$devui-contrast-active: var(--devui-contrast-active, #de504e);// 突出按钮激活
+$devui-contrast-hover: var(--devui-contrast-hover, #d64a52);  // 突出按钮悬停
+$devui-contrast-active: var(--devui-contrast-active, #b12220);// 突出按钮激活
+$devui-contrast-disabled: var(--devui-contrast-disabled, #ffbcba); // 突出按钮禁用
 
 // 状态
 $devui-danger-line: var(--devui-danger-line, #f66f6a);  // 失败边框
diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md
index 05128fd859..3023a010eb 100644
--- a/packages/devui-vue/docs/components/button/index.md
+++ b/packages/devui-vue/docs/components/button/index.md
@@ -6,206 +6,204 @@
 
 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
 
-### 主要按钮
+### 按钮类型
 
-:::demo
+:::demo 通过`variant`设置按钮类型，目前支持`solid`、`outline`、`text`三种类型，默认为`outline`类型。
 
 ```vue
 <template>
-  <d-button id="primaryBtn" style="margin-right: 8px">Primary</d-button>
-  <d-button :disabled="true">Disabled</d-button>
+  <div class="button-size-demo">
+    <d-button variant="solid">Solid Button</d-button>
+    <d-button>Outline Button</d-button>
+    <d-button variant="text">Text Button</d-button>
+  </div>
 </template>
+
+<style>
+.button-size-demo > button {
+  margin-right: 8px;
+}
+</style>
 ```
+
 :::
-### 次要按钮
 
-:::demo
+### 主题色
+
+:::demo 通过`color`设置按钮主题，目前支持`secondary`、`primary`、`danger`三种类型，默认为`secondary`类型。
 
 ```vue
 <template>
-  <d-button variant="common" style="margin-right: 8px">Common</d-button>
-  <d-button variant="common" :disabled="true">Disabled</d-button>
+  <div class="button-size-demo">
+    <d-button variant="solid" color="primary">Primary</d-button>
+    <d-button color="primary">Primary</d-button>
+    <d-button variant="text" color="primary">Primary</d-button>
+  </div>
+  <br />
+  <div class="button-size-demo">
+    <d-button variant="solid" color="danger">Danger</d-button>
+    <d-button color="danger">Danger</d-button>
+    <d-button variant="text" color="danger">Danger</d-button>
+  </div>
 </template>
 ```
+
 :::
 
-### 左按钮与右按钮
+### 按钮大小
+
+:::demo 通过`size`设置按钮大小，支持`xs`、`sm`、`md`、`lg`四种类型，默认为`md`。
 
-:::demo
 ```vue
 <template>
-  <d-button variant="primary" bsPosition="left">Left</d-button>
-  <d-button variant="common" bsPosition="right">Right</d-button>
+  <div class="button-size-demo">
+    <d-button size="xs">Mini</d-button>
+    <d-button size="sm">Small</d-button>
+    <d-button>Middle</d-button>
+    <d-button size="lg">Large</d-button>
+  </div>
 </template>
 ```
+
 :::
 
+### 禁用按钮
 
+:::demo 通过`disabled`参数设置按钮禁用状态。
 
-### 按钮形态
-用于给按钮增加不同的使用场景。
-:::demo
 ```vue
 <template>
-  <div class="flex flex-col space-y-xs">
-    <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 class="button-size-demo">
+    <d-button variant="solid">Solid Button</d-button>
+    <d-button>Outline Button</d-button>
+    <d-button variant="text">Text Button</d-button>
+  </div>
+  <br />
+  <div class="button-size-demo">
+    <d-button variant="solid" disabled>Solid Button</d-button>
+    <d-button disabled>Outline Button</d-button>
+    <d-button variant="text" disabled>Text Button</d-button>
   </div>
 </template>
 ```
-:::
 
-### 文字按钮
-:::demo
-```vue
-<template>
-  <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>
-```
 :::
 
 ### 加载中状态
-:::demo
+
+:::demo 通过`loading`参数设置按钮加载中状态。
+
 ```vue
 <template>
-  <d-button :showLoading="showLoading" @click="handleClick"> click me! </d-button>
+  <d-button variant="solid" color="primary" :loading="showLoading" @click="handleClick">Click Me</d-button>
 </template>
 <script>
-  import { ref, onBeforeUnmount } from 'vue';
-  export default {
-    setup() {
-      const showLoading = ref(false);
-      const timerId = ref();      
-      const handleClick = () => {
-        showLoading.value = true;
-        timerId.value = setTimeout(() => {
-          showLoading.value = false;
-        }, 2000);
-      }
-
-      onBeforeUnmount(() => {
-        if (!timerId.value) {
-          return;
-        }
-        clearTimeout(timerId.value);
-      });
-
-      return { showLoading, handleClick };
-    }
-  }
+import { ref, onBeforeUnmount } from 'vue';
+export default {
+  setup() {
+    const showLoading = ref(false);
+    const handleClick = () => {
+      showLoading.value = true;
+      setTimeout(() => {
+        showLoading.value = false;
+      }, 2000);
+    };
+
+    return { showLoading, handleClick };
+  },
+};
 </script>
 ```
-:::
 
-### 自动获得焦点
-通过autofocus设置按钮自动获得焦点。
-:::demo
-```vue
-<template>
-  <d-button variant="primary" :bordered="true" :autofocus="true" style="margin-right: 8px"> Confirm </d-button>
-  <d-button variant="common"> Cancel </d-button>
-</template>
-```
 :::
 
 ### 图标
 
 :::demo
+
 ```vue
 <template>
-  <div class="mb-l">
-    <d-button icon="add" variant="primary"> New </d-button>
-    <d-button icon="filter" variant="common"> Filter </d-button>
+  <div class="button-size-demo">
+    <d-button icon="add" variant="solid" color="primary">New</d-button>
+    <d-button icon="filter">Filter</d-button>
   </div>
-  <div class="mb-l">
-    <d-button icon="add" variant="primary" :disabled="true"> New(disabled) </d-button>
-    <d-button icon="filter" variant="common" :disabled="true"> Filter(disabled) </d-button>
+  <br />
+  <div class="button-size-demo">
+    <d-button icon="add" variant="solid" color="primary" disabled>New(disabled)</d-button>
+    <d-button icon="filter" disabled>Filter(disabled)</d-button>
   </div>
-  <div class="mb-l">
-    <d-button icon="connect" variant="text-dark" style="margin-right: 4px"> Link </d-button>
-    <d-button icon="run" variant="text-dark"> Run </d-button>
+  <br />
+  <div class="button-size-demo">
+    <d-button icon="connect" variant="text">Link</d-button>
+    <d-button icon="run" variant="text">Run</d-button>
   </div>
-  <div class="mb-l">
-    <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>
+  <br />
+  <div class="button-size-demo">
+    <d-button icon="connect" variant="text" disabled>Link(disabled)</d-button>
+    <d-button icon="run" variant="text" disabled>Run(disabled)</d-button>
   </div>
-  <div class="mb-l">
-    <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>
+  <br />
+  <div class="button-size-demo">
+    <d-button icon="add" variant="text" title="add"></d-button>
+    <d-button icon="delete" variant="text" title="delete"></d-button>
   </div>
-  <div class="mb-l">
-    <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>
+  <br />
+  <div class="button-size-demo">
+    <d-button icon="add" variant="text" disabled title="add"></d-button>
+    <d-button icon="delete" variant="text" disabled title="delete"></d-button>
   </div>
-  <div class="mb-l">
-    <d-button class="mr-xs" variant="common">
+  <br />
+  <div class="button-size-demo">
+    <d-button size="xs">
       Click me
       <span class="icon-chevron-down"></span>
     </d-button>
   </div>
-  <div class="mb-l">
-    <d-button class="mr-xs" variant="text-dark">
+  <br />
+  <div class="button-size-demo">
+    <d-button variant="text">
       Click me
       <span class="icon-chevron-down"></span>
     </d-button>
   </div>
 </template>
 <style>
-
 .icon-chevron-down {
   display: inline-block;
   vertical-align: middle;
   position: relative;
   top: -0.1em;
 }
-
 </style>
 ```
+
 :::
 
-### API
-d-button 参数
-|   参数    |       类型        |   默认    | 说明                             |
-| :-------: | :---------------: | :-------: | :------------------------------- |
-|   type    |   `IButtonType`   | 'button'  | 可选，按钮类型                   |
-| variant  |  `IButtonVariant`   | 'primary' | 可选，按钮的形态                   |
-| position  | `IButtonPosition` | 'default' | 可选，按钮位置                   |
-|   size    |   `IButtonSize`   |   'md'    | 可选，按钮大小                   |
-| bordered  |     `boolean`     |   false   | 可选，是否有边框                 |
-|   icon    |     `string`      |    --     | 可选，点击背景触发的事件         |
-|   width   |     `string`      |    --     | 可选，弹出框宽度(e.g '300px')    |
-| disabled  |     `boolean`     |   false   | 可选，是否禁用button             |
-| autofocus |     `boolean`     |   false   | 可选，按钮加载时是否自动获得焦点 |
-| showLoading| `boolean` | false | 可选，是否显示加载提示 |
-
-d-button 事件
-|  参数   |             类型              | 默认  | 说明           |
-| :-----: | :---------------------------: | :---: | :------------- |
-| onClick | `(event: MouseEvent) => void` |  --   | 可选，点击事件 |
-
-
-IButtonType 
-``` typescript
-type IButtonType = 'button' | 'submit' | 'reset';
-```
+### d-button 参数
 
-IButtonVariant 
-``` typescript
-type IButtonVariant = 'common' | 'primary' | 'text' | 'text-dark' | 'danger' | 'success' | 'warning';
-```
+| 参数     | 类型             | 默认        | 说明                  | 跳转 Demo                 |
+| -------- | ---------------- | ----------- | --------------------- | ------------------------- |
+| variant  | `IButtonVariant` | 'outline'   | 可选，按钮的形态      | [按钮类型](#按钮类型)     |
+| color    | `IButtonColor`   | 'secondary' | 可选，按钮主题        | [主题色](#主题色)         |
+| size     | `IButtonSize`    | 'md'        | 可选，按钮大小        | [按钮大小](#按钮大小)     |
+| icon     | `string`         | --          | 可选，自定义按钮图标  | [图标](#图标)             |
+| disabled | `boolean`        | false       | 可选，是否禁用 button | [禁用按钮](#禁用按钮)     |
+| loading  | `boolean`        | false       | 可选，设置加载中状态  | [加载中状态](#加载中状态) |
 
-IButtonPosition 
-``` typescript
-type IButtonPosition = 'left' | 'right' | 'default';
+### IButtonVariant 类型
+
+```typescript
+type IButtonVariant = 'solid' | 'outline' | 'text';
 ```
 
-IButtonSize
-``` typescript
+### IButtonSize 类型
+
+```typescript
 type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
 ```
+
+### IButtonColor 类型
+
+```typescript
+type IButtonColor = 'secondary' | 'primary' | 'danger';
+```
diff --git a/packages/devui-vue/docs/components/carousel/index.md b/packages/devui-vue/docs/components/carousel/index.md
index c1f6450788..370a009c8d 100644
--- a/packages/devui-vue/docs/components/carousel/index.md
+++ b/packages/devui-vue/docs/components/carousel/index.md
@@ -117,9 +117,9 @@ export default defineComponent({
     <d-carousel-item v-for="item in items" :key="item">{{ item }}</d-carousel-item>
   </d-carousel>
   <div class="carousel-demo-operate">
-    <d-button bsStyle="common" @click="onPrev">上一张</d-button>
-    <d-button bsStyle="primary" @click="onNext">下一张</d-button>
-    <d-button bsStyle="common" @click="onGoFirst">第一张</d-button>
+    <d-button @click="onPrev">上一张</d-button>
+    <d-button @click="onNext">下一张</d-button>
+    <d-button @click="onGoFirst">第一张</d-button>
   </div>
 </template>
 <script lang="ts">
diff --git a/packages/devui-vue/docs/components/form/index.md b/packages/devui-vue/docs/components/form/index.md
index 11eae36d49..8978ba33cd 100644
--- a/packages/devui-vue/docs/components/form/index.md
+++ b/packages/devui-vue/docs/components/form/index.md
@@ -75,7 +75,7 @@
     </d-form-item>
     <d-form-operation class="form-demo-form-operation">
       <d-button type="submit" class="form-demo-btn">提交</d-button>
-      <d-button bsStyle="common" @click="resetForm">重置</d-button>
+      <d-button @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
 
@@ -203,7 +203,7 @@ Label左右布局方式。
     </d-form-item>
     <d-form-operation class="form-demo-form-operation">
       <d-button type="submit" class="form-demo-form-demo-demo-btn">提交</d-button>
-      <d-button bsStyle="common" @click="resetForm">重置</d-button>
+      <d-button @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
 
@@ -335,7 +335,7 @@ export default defineComponent({
         </d-form-item>
         <d-form-operation class="form-demo-form-operation">
           <d-button type="submit" class="form-demo-form-demo-demo-btn">提交</d-button>
-          <d-button bsStyle="common" @click="resetForm">重置</d-button>
+          <d-button @click="resetForm">重置</d-button>
         </d-form-operation>
       </d-form>
     </div>
@@ -484,7 +484,7 @@ export default defineComponent({
 
     <d-form-operation class="form-demo-form-operation">
       <d-button type="submit" class="form-demo-form-demo-demo-btn">提交</d-button>
-      <d-button bsStyle="common" @click="resetForm">重置</d-button>
+      <d-button @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
 </template>
@@ -1035,7 +1035,7 @@ export default defineComponent({
     </d-form-item>
     <d-form-operation class="form-demo-form-operation">
       <d-button type="submit" class="form-demo-form-demo-demo-btn">提交</d-button>
-      <d-button bsStyle="common" @click="resetForm">重置</d-button>
+      <d-button @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
 </template>
@@ -1121,7 +1121,7 @@ export default defineComponent({
     </d-form-item>
     <d-form-operation class="form-demo-form-operation">
       <d-button type="submit" class="form-demo-demo-btn">提交</d-button>
-      <d-button bsStyle="common" @click="resetForm">重置</d-button>
+      <d-button @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
 </template>
@@ -1401,7 +1401,7 @@ export default defineComponent({
     </d-form-item>
     <d-form-operation class="form-demo-form-operation">
       <d-button type="submit" class="form-demo-demo-btn">提交</d-button>
-      <d-button bsStyle="common" @click="resetForm">重置</d-button>
+      <d-button @click="resetForm">重置</d-button>
     </d-form-operation>
   </d-form>
 </template>
diff --git a/packages/devui-vue/docs/components/loading/index.md b/packages/devui-vue/docs/components/loading/index.md
index 3d2ca412e3..686cb563d0 100644
--- a/packages/devui-vue/docs/components/loading/index.md
+++ b/packages/devui-vue/docs/components/loading/index.md
@@ -127,26 +127,24 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-button :width="220" @click="showLoading1" style="margin-right: 8px; display: inline-block;">
+  <d-button @click="showLoading1" style="margin-right: 8px; display: inline-block; width: 220px;">
     Loading Style 1
   </d-button>
 
   <d-button
-    :width="220"
     v-dLoading="isShowLoading2"
     @click="showLoading2"
     :loadingTemplateRef="temp2"
-    style="margin-right: 8px; display: inline-block;"
+    style="margin-right: 8px; display: inline-block; width: 220px;"
   >
     Loading Style 2
   </d-button>
 
   <d-button
     v-dLoading="true"
-    bsStyle="text"
-    :width="220"
+    variant="text"
     :loadingTemplateRef="temp3"
-    style="margin-right: 8px; display: inline-block;"
+    style="margin-right: 8px; display: inline-block; width: 220px;"
   >
     Loading Style 3
   </d-button>
@@ -259,25 +257,22 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-button :width="220" @click="serviceToBody" style="margin-right: 8px; display: inline-block;">
+  <d-button @click="serviceToBody" style="margin-right: 8px; display: inline-block; width: 220px;">
     click me show full screen loading!
   </d-button>
 
   <d-button
-    :width="200"
     v-if="isShow"
     @click="openTargetLoading"
-    style="margin-right: 8px; display: inline-block;"
+    style="margin-right: 8px; display: inline-block; width: 200px;"
   >
     click me show loading in target!
   </d-button>
 
   <d-button
-    :width="200"
     v-else
-    bsStyle="common"
     @click="closeTargetLoading"
-    style="margin-right: 8px; display: inline-block;"
+    style="margin-right: 8px; display: inline-block; width: 200px;"
   >
     click me close loading in target!
   </d-button>
diff --git a/packages/devui-vue/docs/components/modal/index.md b/packages/devui-vue/docs/components/modal/index.md
index c6516f2e3e..5d7530edc4 100644
--- a/packages/devui-vue/docs/components/modal/index.md
+++ b/packages/devui-vue/docs/components/modal/index.md
@@ -73,7 +73,7 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-button variant="common" @click="open">click me!</d-button>
+  <d-button @click="open">click me!</d-button>
 </template>
 <script>
 import {ref, defineComponent, inject, onMounted, h} from 'vue';
@@ -145,10 +145,10 @@ export default defineComponent({
 ```vue
 <template>
   <div class="btn-group">
-    <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>
+    <d-button @click="open('success', '成功', 'Delete [Git] repository successfully.')">success</d-button>
+    <d-button @click="open('failed', '错误', 'It is failed. if you want to resolve it,please contact the supportor.')">fail</d-button>
+    <d-button @click="open('warning', '警告', 'Leaving this page!')">warning</d-button>
+    <d-button @click="open('info', '提示', 'You signed in with another tab or window. Reload to refresh your session.')">info</d-button>
   </div>
 </template>
 <script>
diff --git a/packages/devui-vue/docs/components/pagination/index.md b/packages/devui-vue/docs/components/pagination/index.md
index f123d91805..7bca0afa1b 100644
--- a/packages/devui-vue/docs/components/pagination/index.md
+++ b/packages/devui-vue/docs/components/pagination/index.md
@@ -351,12 +351,12 @@ export default defineComponent({
     :lite="true"
   />
   <div style="display: flex; margin-top: 10px;">
-    <d-button bsStyle="primary" circled="true" size="sm" @click="setLiteTotal(0)" width="200">total = 0</d-button>
-    <d-button bsStyle="common" circled="true" size="sm" @click="setLiteTotal(20)" width="200">total = 20</d-button>
-    <d-button bsStyle="common" circled="true" size="sm" @click="setLiteTotal(30000)" width="200">total = 30000</d-button>
-    <d-button bsStyle="common" circled="true" size="sm" @click="setLiteTotal(100000)" width="200">total = 100000</d-button>
-    <d-button bsStyle="common" circled="true" size="sm" @click="setIndex(2)" width="200">index = 2</d-button>
-    <d-button bsStyle="common" circled="true" size="sm" @click="setIndex(3)" width="200">index = 3</d-button>
+    <d-button size="sm" @click="setLiteTotal(0)" width="200">total = 0</d-button>
+    <d-button size="sm" @click="setLiteTotal(20)" width="200">total = 20</d-button>
+    <d-button size="sm" @click="setLiteTotal(30000)" width="200">total = 30000</d-button>
+    <d-button size="sm" @click="setLiteTotal(100000)" width="200">total = 100000</d-button>
+    <d-button size="sm" @click="setIndex(2)" width="200">index = 2</d-button>
+    <d-button size="sm" @click="setIndex(3)" width="200">index = 3</d-button>
   </div>
 </template>
 <script>
diff --git a/packages/devui-vue/docs/components/popover/index.md b/packages/devui-vue/docs/components/popover/index.md
index 71a3531186..625524f3bd 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 variant="common">default</d-button>
+      <d-button>default</d-button>
     </template>
   </d-popover>
   <d-popover  content="info!" popType="info" position="top" trigger="hover" controlled>
     <template #reference>
-      <d-button  variant="primary">info</d-button>
+      <d-button variant="solid">info</d-button>
     </template>
   </d-popover>
   <d-popover  content="error!" popType="error" controlled position="left" :zIndex="9999">
     <template #reference>
-      <d-button  variant="danger">error</d-button>
+      <d-button variant="solid" color="danger">error</d-button>
     </template>
   </d-popover>
     <d-popover  content="success!" popType="success" controlled position="right">
     <template #reference>
-      <d-button  variant="success">success</d-button>
+      <d-button>success</d-button>
     </template>
   </d-popover>
   <d-popover  content="warning!" popType="warning" controlled>
     <template #reference>
-      <d-button  variant="warning">warning</d-button>
+      <d-button>warning</d-button>
     </template>
   </d-popover>
   <d-popover  content="no-animation!" :showAnimation="false" :popMaxWidth="100" controlled>
     <template #reference>
-      <d-button  variant="common">no-animation</d-button>
+      <d-button>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 variant="primary"> click me!</d-button>
+      <d-button variant="solid"> click me!</d-button>
     </template>
   </d-popover>
   <d-popover  content="自定义内容" trigger="hover" :popoverStyle="{ backgroundColor: '#7693f5',color: '#fff'}" controlled>
     <template #reference>
-      <d-button variant="primary"> hover me!</d-button>
+      <d-button> hover me!</d-button>
     </template>
   </d-popover>
 </div>
@@ -93,7 +93,7 @@
       <div>left</div>
     </template>
   <template #reference>
-    <d-button variant="common">left</d-button>
+    <d-button>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 variant="common">left-top</d-button>
+      <d-button>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 variant="common">left-bottom</d-button>
+      <d-button>left-bottom</d-button>
     </template>
   </d-popover>
 </div>
@@ -122,7 +122,7 @@
         <span >top</span>
       </template>
     <template #reference>
-      <d-button variant="common">top</d-button>
+      <d-button>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 variant="common">top-left</d-button>
+      <d-button>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 variant="common">top-right</d-button>
+      <d-button>top-right</d-button>
     </template>
   </d-popover>
 </div>
@@ -149,7 +149,7 @@
         <div >right</div>
       </template>
     <template #reference>
-      <d-button variant="common">right</d-button>
+      <d-button>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 variant="common">right-top</d-button>
+      <d-button>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 variant="common">right-bottom</d-button>
+      <d-button>right-bottom</d-button>
     </template>
   </d-popover>
 </div>
@@ -178,7 +178,7 @@
         <div >bottom</div>
       </template>
     <template #reference>
-      <d-button variant="common">bottom</d-button>
+      <d-button>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 variant="common">bottom-left</d-button>
+      <d-button>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 variant="common">bottom-right</d-button>
+      <d-button>bottom-right</d-button>
     </template>
   </d-popover>
 </div>
@@ -220,7 +220,7 @@
         <div > 手动触发 </div>
       </template>
     <template #reference>
-      <d-button variant="primary" @click="onClick">手动触发</d-button>
+      <d-button @click="onClick">手动触发</d-button>
     </template>
   </d-popover>
 </template>
@@ -258,7 +258,7 @@ export default defineComponent({
         show Me
       </template>
     <template #reference>
-      <d-button variant="primary">MouseEnter delay 500ms</d-button>
+      <d-button variant="solid">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 variant="common"> MouseLeave delay 2000ms</d-button>
+      <d-button> MouseLeave delay 2000ms</d-button>
     </template>
   </d-popover>
   </div>
diff --git a/packages/devui-vue/docs/components/table/index.md b/packages/devui-vue/docs/components/table/index.md
index e09fe58ef0..f255895f1b 100644
--- a/packages/devui-vue/docs/components/table/index.md
+++ b/packages/devui-vue/docs/components/table/index.md
@@ -164,7 +164,7 @@ export default defineComponent({
 ```vue
 <template>
   <div>
-    <d-button type="primary" @click="handleClick">更新数据</d-button>
+    <d-button @click="handleClick">更新数据</d-button>
     <d-table :data="emptyData">
       <d-column field="firstName" header="First Name"></d-column>
       <d-column field="lastName" header="Last Name"></d-column>
@@ -224,7 +224,7 @@ export default defineComponent({
 ```vue
 <template>
   <div>
-    <d-button type="primary" @click="handleClick">更新数据</d-button>
+    <d-button @click="handleClick">更新数据</d-button>
     <d-table :data="emptyData" :scrollable="true">
       <d-column field="firstName" header="First Name" filterable :filterList="filterList" :order="2" :minWidth="100"></d-column>
       <d-column field="lastName" header="Last Name" :order="3"></d-column>
diff --git a/packages/devui-vue/docs/components/toast/index.md b/packages/devui-vue/docs/components/toast/index.md
index 04ff27c8ff..79f858e151 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 variant="success" @click.native="showToast('success')"
+    <d-button @click.native="showToast('success')"
       >Success</d-button
     >
-    <d-button variant="warning" @click.native="showToast('warning')"
+    <d-button @click.native="showToast('warning')"
       >Warning</d-button
     >
-    <d-button variant="danger" @click.native="showToast('error')"
+    <d-button @click.native="showToast('error')"
       >Error</d-button
     >
-    <d-button variant="primary" @click.native="showToast('multiple')"
+    <d-button @click.native="showToast('multiple')"
       >Multiple</d-button
     >
-    <d-button variant="common" @click.native="showToast('link')">link</d-button>
-    <d-button variant="common" @click.native="showToast('plainText')"
+    <d-button @click.native="showToast('link')">link</d-button>
+    <d-button @click.native="showToast('plainText')"
       >pure text</d-button
     >
-    <d-button variant="common" @click.native="showToast('common')"
+    <d-button @click.native="showToast('common')"
       >common</d-button
     >
-    <d-button variant="warning" @click.native="showToast('noTitle')"
+    <d-button @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 variant="success" @click.native="showToast2('success')"
+    <d-button @click.native="showToast2('success')"
       >Success</d-button
     >
-    <d-button variant="warning" @click.native="showToast2('warning')"
+    <d-button @click.native="showToast2('warning')"
       >Warning</d-button
     >
-    <d-button variant="danger" @click.native="showToast2('error')"
+    <d-button @click.native="showToast2('error')"
       >Error</d-button
     >
-    <d-button variant="common" @click.native="showToast2('common')"
+    <d-button @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 variant="common" @click.stop="showToast3()"
+    <d-button @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 variant="common" @click.native="showToast4()">Single</d-button>
+    <d-button @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()" variant="common"
+    <d-button v-if="!isShow" @click.native="openToast2()"
       >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()" variant="common"
+    <d-button v-if="isShow" @click.native="closeToast3()"
       >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 e12f72bc7e..3b7327b669 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 variant="common">left</d-button>
+      <d-button>left</d-button>
     </d-tooltip>
     <d-tooltip position="top" content="I am a HTML Element!">
-      <d-button variant="common">top</d-button>
+      <d-button>top</d-button>
     </d-tooltip>
     <d-tooltip position="bottom" content="I am a HTML Element!">
-      <d-button variant="common">bottom</d-button>
+      <d-button>bottom</d-button>
     </d-tooltip>
     <d-tooltip position="right" content="I am a HTML Element!">
-      <d-button variant="common">right</d-button>
+      <d-button>right</d-button>
     </d-tooltip>
     <d-tooltip content="No Animation" :showAnimation="false">
-      <d-button variant="common">No Animation</d-button>
+      <d-button>No Animation</d-button>
     </d-tooltip>
   </div>
 </template>
@@ -63,7 +63,7 @@
     content="Mouse leave 1000ms later."
     mouseLeaveDelay="1000"
   >
-    <d-button variant="common">MouseEnter delay 1000ms</d-button>
+    <d-button>MouseEnter delay 1000ms</d-button>
   </d-tooltip>
 </template>
 ```
diff --git a/packages/devui-vue/docs/components/upload/index.md b/packages/devui-vue/docs/components/upload/index.md
index 347f983b2f..e689eb4c62 100644
--- a/packages/devui-vue/docs/components/upload/index.md
+++ b/packages/devui-vue/docs/components/upload/index.md
@@ -363,7 +363,7 @@ export default {
     :beforeUpload="beforeUpload"
     :showTip="true"
   >
-    <d-button type="primary">选取文件</d-button>
+    <d-button>选取文件</d-button>
     <template v-slot:preloadFiles="slotProps">
       <table class="table preload-files" v-if="slotProps.fileUploaders.length > 0">
         <tr v-for="(fileUploader, index) in slotProps.fileUploaders" :key="index" class="row">