1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
---
id: Badge
section: components
cssPrefix: pf-v6-c-badge
---## Examples
### Read
```html
<span class="pf-v6-c-badge pf-m-read">7</span>
<span class="pf-v6-c-badge pf-m-read">24</span>
<span class="pf-v6-c-badge pf-m-read">240</span>
<span class="pf-v6-c-badge pf-m-read">999+</span>
```
### Unread
```html
<span class="pf-v6-c-badge pf-m-unread">
7
<span class="pf-v6-screen-reader">unread messages</span>
</span>
<span class="pf-v6-c-badge pf-m-unread">
24
<span class="pf-v6-screen-reader">unread messages</span>
</span>
<span class="pf-v6-c-badge pf-m-unread">
240
<span class="pf-v6-screen-reader">unread messages</span>
</span>
<span class="pf-v6-c-badge pf-m-unread">
999+
<span class="pf-v6-screen-reader">unread messages</span>
</span>
```
### Disabled
```html
<span class="pf-v6-c-badge pf-m-disabled pf-m-read">7</span>
<span class="pf-v6-c-badge pf-m-disabled pf-m-read">24</span>
<span class="pf-v6-c-badge pf-m-unread pf-m-disabled">240</span>
<span class="pf-v6-c-badge pf-m-unread pf-m-disabled">999+</span>
```
## Documentation
### Overview
Always add a modifier class. Never use the class `.pf-v6-c-badge` on its own.
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
| `.pf-m-read` | `.pf-v6-c-badge` | Applies read badge styling. |
| `.pf-m-unread` | `.pf-v6-c-badge` | Applies unread badge styling. |
| `.pf-m-disabled` | `.pf-v6-c-badge` | Applies disabled badge styling. For use when a badge is used in a disabled element. |
|
