From b3c423ff1123df3d2e056adbd2f3ca2d4d658237 Mon Sep 17 00:00:00 2001
From: bhwa23 <404174262@qq.com>
Date: Fri, 29 Mar 2024 15:11:03 +0800
Subject: [PATCH] feat(components): [badge] add color prop  (#16069)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 🎸 [badge] add color prop

add color prop to set badge background color

* Update badge.md

* 更新文档

* docs: ✏️ [badge] add color prop

* Update docs/en-US/component/badge.md

---------

Co-authored-by: btea <2356281422@qq.com>
---
 docs/en-US/component/badge.md           | 17 +++++++++--------
 docs/examples/badge/basic.vue           |  6 ++++--
 packages/components/badge/src/badge.ts  |  4 ++++
 packages/components/badge/src/badge.vue |  1 +
 4 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/docs/en-US/component/badge.md b/docs/en-US/component/badge.md
index 774edc5bfc..5a8f3c4f28 100644
--- a/docs/en-US/component/badge.md
+++ b/docs/en-US/component/badge.md
@@ -51,14 +51,15 @@ badge/dot
 
 ### Attributes
 
-| Name               | Description                                                                   | Type                                                               | Default |
-| ------------------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
-| value              | display value.                                                                | ^[string] / ^[number]                                              | ''      |
-| max                | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number]                                                          | 99      |
-| is-dot             | if a little dot is displayed.                                                 | ^[boolean]                                                         | false   |
-| hidden             | hidden badge.                                                                 | ^[boolean]                                                         | false   |
-| type               | badge type.                                                                   | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger  |
-| show-zero ^(2.6.0) | Whether to show badge when value is zero.                                     | ^[boolean]                                                         | true    |
+| Name               | Description                                                  | Type                                                         | Default |
+| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------- |
+| value              | display value.                                               | ^[string] / ^[number]                                        | ''      |
+| max                | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number]                                                    | 99      |
+| is-dot             | if a little dot is displayed.                                | ^[boolean]                                                   | false   |
+| hidden             | hidden badge.                                                | ^[boolean]                                                   | false   |
+| type               | badge type.                                                  | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger  |
+| show-zero ^(2.6.0) | Whether to show badge when value is zero.                    | ^[boolean]                                                   | true    |
+| color ^(2.6.3)     | background color of the dot                                  | ^[string]                                                    |         |
 
 ### Slots
 
diff --git a/docs/examples/badge/basic.vue b/docs/examples/badge/basic.vue
index 41c13d39da..8b3132073f 100644
--- a/docs/examples/badge/basic.vue
+++ b/docs/examples/badge/basic.vue
@@ -11,7 +11,9 @@
   <el-badge :value="2" class="item" type="warning">
     <el-button>replies</el-button>
   </el-badge>
-
+  <el-badge :value="1" class="item" color="green">
+    <el-button>custom background</el-button>
+  </el-badge>
   <el-dropdown trigger="click">
     <span class="el-dropdown-link">
       Click Me
@@ -39,7 +41,7 @@ import { CaretBottom } from '@element-plus/icons-vue'
 <style scoped>
 .item {
   margin-top: 10px;
-  margin-right: 40px;
+  margin-right: 30px;
 }
 
 .el-dropdown {
diff --git a/packages/components/badge/src/badge.ts b/packages/components/badge/src/badge.ts
index cdfbfcf58c..dc167cab9b 100644
--- a/packages/components/badge/src/badge.ts
+++ b/packages/components/badge/src/badge.ts
@@ -39,5 +39,9 @@ export const badgeProps = buildProps({
     type: Boolean,
     default: true,
   },
+  /**
+   * @description background color of the Badge
+   */
+  color: String,
 } as const)
 export type BadgeProps = ExtractPropTypes<typeof badgeProps>
diff --git a/packages/components/badge/src/badge.vue b/packages/components/badge/src/badge.vue
index f8d8224f36..bef16a6285 100644
--- a/packages/components/badge/src/badge.vue
+++ b/packages/components/badge/src/badge.vue
@@ -10,6 +10,7 @@
           ns.is('fixed', !!$slots.default),
           ns.is('dot', isDot),
         ]"
+        :style="{ backgroundColor: color }"
         v-text="content"
       />
     </transition>