1# badge
2
3>  **NOTE**
4>
5>  This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<badge>** component is used to mark new events that require user attention in your application.
8
9
10## Required Permissions
11
12None
13
14
15## Child Components
16
17This component supports only one child component.
18
19>  **NOTE**
20>
21>  If multiple child components are used, only the first one takes effect by default.
22
23
24## Attributes
25
26In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
27
28| Name              | Type       | Default Value  | Mandatory| Description                                                        |
29| ------------------ | ----------- | -------- | ---- | ------------------------------------------------------------ |
30| placement          | string      | rightTop | No  | Position of a number or dot badge. Available values are as follows:<br>- **right**: on the right border of the component.<br>- **rightTop**: in the upper right corner of the component border.<br>- **left**: on the left border of the component.|
31| count              | number      | 0        | No  | Number of notifications displayed via the badge. If the value is 0 (default value), the badge is not displayed. If the value is greater than 0, the badge is a number badge.<br>When the **count** value is greater than the **maxcount** value, *maxcount***+** is displayed. The largest integer value supported for **count** is **2147483647**.|
32| visible            | boolean     | false    | No  | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, also set the **count** attribute.|
33| maxcount           | number      | 99       | No  | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.<br>The largest integer value supported for **maxcount** is **2147483647**.|
34| config             | BadgeConfig | -        | No  | Configuration of the badge.                                |
35| label<sup>6+</sup> | string      | -        | No  | Text of the new notification displayed via the badge.<br>When this attribute is set, attributes **count** and **maxcount** do not take effect.|
36
37**Table 1** BadgeConfig
38
39| Name        | Type            | Default Value     | Mandatory  | Description          |
40| ---------- | -------------- | -------- | ---- | ------------ |
41| badgeColor | &lt;color&gt;  | \#fa2a2d | No   | Background color of the badge.   |
42| textColor  | &lt;color&gt;  | \#ffffff | No   | Text color of the number badge.|
43| textSize   | &lt;length&gt; | 10px     | No   | Text size of the number badge.|
44| badgeSize  | &lt;length&gt; | 6px      | No   | Default size of the dot badge.   |
45
46
47## Styles
48
49The [universal styles](js-components-common-styles.md) are supported.
50
51>  **NOTE**
52>
53>  The total size of child components must be smaller than or equal to that of the **\<badge>** component. Otherwise, the child components cannot be displayed.
54
55
56## Events
57
58The [universal events](js-components-common-events.md) are supported.
59
60
61## Methods
62
63The [universal methods](js-components-common-methods.md) are supported.
64
65
66## Example
67
68```html
69<!-- xxx.hml -->
70<div class="container">
71  <badge class="badge" config="{{badgeconfig}}" visible="true" count="100" maxcount="99">
72    <text class="text1">example</text>
73  </badge>
74  <badge class="badge" visible="true" count="0">
75    <text class="text2">example</text>
76  </badge>
77</div>
78```
79
80```css
81/* xxx.css */
82.container {
83  flex-direction: column;
84  width: 100%;
85  align-items: center;
86}
87.badge {
88  width: 50%;
89  margin-top: 100px;
90}
91.text1 {
92  background-color: #f9a01e;
93  font-size: 50px;
94}
95.text2 {
96  background-color: #46b1e3;
97  font-size: 50px;
98}
99```
100
101```js
102// xxx.js
103export default {
104  data:{
105    badgeconfig:{
106      badgeColor:"#0a59f7",
107      textColor:"#ffffff",
108    }
109  }
110}
111```
112
113![en-us_image_000000117726526811](figures/en-us_image_000000117726526811.png)
114