1# Badge
2
3A budge reminds users that the application has a request to be processed.
4
5
6## How to Use
7
8- Use badges on components such as bottom tabs, list items, toolbar icons, category icons in the content area, and avatars.
9
10- Use badges to mark new events that require users' attention in the application.
11
12- Do not abuse badges. If a user touches a marked item and the content is not as user expected, the user will lose interest in badges, resulting in a drop in the click-through rate.
13
14
15## Category
16
17- Dots
18
19- Numbers
20    | ![badge_sub_1](figures/badge_sub_1.png) | ![badge_sub_2](figures/badge_sub_2.png)  |
21  | -------- | -------- |
22  | Dots| Numbers|
23
24
25### Dots
26
27- Dots mark minor events in applications and are usually displayed on bottom tabs, list items, toolbar icons, category icons in the content area, and avatars. A dot disappears after being touched.
28
29- When an event expires, the dot disappears.
30
31- When there is only text, the red dot is placed on the right of the text.
32
33- When there are an icon and text, the red dot is placed in the upper right corner of the icon.
34    |![1_en-us_image_0000001517133786.png](figures/1_en-us_image_0000001517133786.png) |![2_en-us_image_0000001568412853.png](figures/2_en-us_image_0000001568412853.png) |![1_en-us_image_0000001517612916.png](figures/1_en-us_image_0000001517612916.png) |
35  | -------- | -------- | -------- |
36  | Dot on an icon| Dot in a list| Dot on a subtab|
37
38
39### Numbers
40
41- Numbers mark only major events in the applications. For example, if there are multiple types of events such as application update (major event) and promotional events in the application market, a number indicates the application update is displayed on the application icon on the home screen.
42
43- The number for System update in **Settings** corresponds to the number displayed on the Settings icon on the home screen.
44    | ![numbers-1](figures/numbers-1.png)|![numbers-2](figures/numbers-2.png) |
45  | -------- | -------- |
46  | Number on an icon on the home screen| Number in a list|
47
48- The dot width is adaptive to the text width. The maximum number is 99+.
49
50  ![numbers-specifications](figures/numbers-specifications.png)
51
52
53## Resources
54
55For details about the development guide related to the badge, see [Badge](../../application-dev/reference/arkui-ts/ts-container-badge.md).
56