diff --git a/components/lib/button/BaseButton.vue b/components/lib/button/BaseButton.vue
index ecd864615..32bc1bf83 100644
--- a/components/lib/button/BaseButton.vue
+++ b/components/lib/button/BaseButton.vue
@@ -30,6 +30,10 @@ export default {
             type: String,
             default: null
         },
+        badgeSeverity: {
+            type: String,
+            default: null
+        },
         loading: {
             type: Boolean,
             default: false
diff --git a/components/lib/button/Button.d.ts b/components/lib/button/Button.d.ts
index 0e36382b7..bbda85ea1 100755
--- a/components/lib/button/Button.d.ts
+++ b/components/lib/button/Button.d.ts
@@ -116,6 +116,10 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * Style class of the badge.
      */
     badgeClass?: string | undefined;
+    /**
+     * Severity type of the badge.
+     */
+    badgeSeverity?: 'info' | 'success' | 'warning' | 'danger' | string | null | undefined;
     /**
      * Whether the button is in loading state.
      * @defaultValue false
diff --git a/components/lib/button/Button.vue b/components/lib/button/Button.vue
index 896721b13..9c820d0ef 100755
--- a/components/lib/button/Button.vue
+++ b/components/lib/button/Button.vue
@@ -9,7 +9,7 @@
                 <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
             </slot>
             <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
-            <Badge v-if="badge" :value="badge" :class="badgeClass" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
+            <Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
         </slot>
     </button>
 </template>