diff --git a/packages/devui-vue/docs/en-US/components/badge/index.md b/packages/devui-vue/docs/en-US/components/badge/index.md
new file mode 100644
index 0000000000..519060a93d
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/badge/index.md
@@ -0,0 +1,188 @@
+# Badge
+
+Round logo of number in the upper right corner of the icon.
+
+#### When To Use
+
+The badge is appeared at the upper right corner of the icon or the right of a list item. It's usually an icon that shows a message with a number to tell user what need to be handled.
+
+### Basic Badge
+
+::: demo Basic badge type. When there is a package element, the badge and number are displayed in the upper right corner.
+
+```vue
+
+ Message
+ Message
+ Message
+ Message
+
+
+
+```
+
+:::
+
+### Dotted Badge
+
+:::demo Point badge type. When there is a package element and `show-dot` is set to true, the dot is displayed in the upper right corner by default.
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+:::
+
+### Count Badge
+
+:::demo When the badge is used independently and does not enclose any elements, only the badge status color and number are displayed.
+
+```vue
+
+
+ -
+ System message
+
+
+ -
+ Personal message
+
+
+
+
+
+
+```
+
+:::
+
+### Status Badge
+
+:::demo When the badge is used independently, does not contain any elements, and the `show-dot` parameter is set to true, the badge is a status badge. Different color dots are displayed for different statuses.
+
+```vue
+
+
+ danger
+
+
+ warning
+
+
+ waiting
+
+
+ info
+
+
+ success
+
+
+```
+
+:::
+
+### Badge Position
+
+:::demo Set badgePos to set the badge position.
+
+```vue
+
+ Message
+ Message
+
+
+
+
+
+
+
+```
+
+:::
+
+### Custom
+
+:::demo The bgColor parameter is used to set the badge status color (the badge status color specified by status is invalid). The offsetXY parameter is used to set the badge offset relative to the badgePos.Customizing text and background colors using textColor and bgColor.
+
+```vue
+
+
+
+
+
+
+
+ Message
+ Message
+
+
+```
+
+:::
+
+### d-badge Parameter
+
+| Parameter | Type | Default | Description |
+| ---------- | ------------------- | ----------- | :--------------------------------------------------------------------------------------------------------------------- |
+| count | `Number` | -- | Optional. Set the number of basic badges to be displayed. |
+| max-count | `Number` | 99 | Optional. Sets the maximum number of basic and counting badges that can be displayed.When count is greater than maxCount, maxCount+ is displayed. |
+| show-dot | `Boolean` | false | Optional. The value true indicates the dot badge (with package) or status badge (without package). The value false indicates the basic badge (with package) or count badge (without package). |
+| status | `BadgeStatusType` | -- | Optional. The status color is danger\| warning \| waiting \| success \| info. |
+| position | `BadgePositionType` | 'top-right' | Optional. The logo position is top-left\| top-right \| bottom-left \| bottom-right |
+| bg-color | `String` | -- | Optional. The badge color can be customized. In this case, the badge status color specified by status is invalid. |
+| text-color | `String` | -- | Optional. You can customize the logo text color. |
+| offset | `[number, number]` | -- | Optional. Indicates the logo position offset when there is a package. The format is [x,y], in px. This parameter is optional. x is the relative right offset (right: -x px), y is the relative top offset (top: y px). |
+
+### BadgeStatusType
+
+```typescript
+type BadgeStatusType = 'danger' | 'warning' | 'waiting' | 'success' | 'info' | 'common';
+```
+
+### BadgePositionType
+
+```typescript
+type BadgePositionType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+```