UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

github.com/patternfly/patternfly

patternfly/patternfly

50 lines (45 loc) • 969 B
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
--- id: Badge section: components cssPrefix: pf-c-badge --- ## Examples ### Read ```hbs {{#> badge badge--modifier="pf-m-read"}} 7 {{/badge}} {{#> badge badge--modifier="pf-m-read"}} 24 {{/badge}} {{#> badge badge--modifier="pf-m-read"}} 240 {{/badge}} {{#> badge badge--modifier="pf-m-read"}} 999+ {{/badge}} ``` ### Unread ```hbs {{#> badge badge--modifier="pf-m-unread"}} 7 {{/badge}} {{#> badge badge--modifier="pf-m-unread"}} 24 {{/badge}} {{#> badge badge--modifier="pf-m-unread"}} 240 {{/badge}} {{#> badge badge--modifier="pf-m-unread"}} 999+ {{/badge}} ``` ## Documentation ### Overview Always add a modifier class. Never use the class `.pf-c-badge` on its own. ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** | | `.pf-m-read` | `.pf-c-badge` | Applies read badge styling. | | `.pf-m-unread` | `.pf-c-badge` | Applies unread badge styling. |