x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="flex items-center flex-wrap gap-half"> <div class="badge">Badge</div> <div class="badge badge--primary">Primary</div> <div class="badge badge--secondary">Secondary</div> <div class="badge badge--negative">Negative</div> <div class="badge badge--positive">Positive</div> <div class="badge"> <span class="icon icon--circle-check" aria-hidden="true"></span> <span>Verified</span> </div> <div class="badge badge--number badge--primary">8</div> <div class="badge badge--number badge--negative">99</div> <div class="badge badge--number">20+</div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="flex items-center flex-wrap gap-half"> <div class="badge">Badge</div> <div class="badge badge--primary">Primary</div> <div class="badge badge--secondary">Secondary</div> <div class="badge badge--negative">Negative</div> <div class="badge badge--positive">Positive</div> <div class="badge"> <span class="icon icon--circle-check" aria-hidden="true"></span> <span>Verified</span> </div> <div class="badge badge--number badge--primary">8</div> <div class="badge badge--number badge--negative">99</div> <div class="badge badge--number">20+</div></div>
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
.badge { align-items: center; background-color: var(--badge-background, var(--color-bg)); border-radius: var(--badge-radius, var(--rounded-md)); border: 1px solid var(--badge-border-color, var(--color-border)); box-shadow: var(--badge-box-shadow, none); color: var(--badge-color, var(--color-text)); column-gap: var(--size-1); display: inline-flex; font-size: var(--text-xs); font-weight: var(--font-semibold); justify-content: center; line-height: var(--leading-4); min-inline-size: var(--badge-min-inline-size, 0); padding: var(--badge-padding, .125rem .5rem);}.badge--primary { --badge-background: var(--color-primary); --badge-border-color: transparent; --badge-box-shadow: var(--shadow-sm); --badge-color: var(--color-text-reversed);}.badge--secondary { --badge-background: var(--color-secondary); --badge-border-color: transparent; --badge-box-shadow: none; --badge-color: var(--color-text);}.badge--positive { --badge-background: var(--color-positive); --badge-border-color: transparent; --badge-box-shadow: var(--shadow-sm); --badge-color: white;}.badge--negative { --badge-background: var(--color-negative); --badge-border-color: transparent; --badge-box-shadow: var(--shadow-sm); --badge-color: white;}.badge--number { --badge-min-inline-size: var(--size-5); --badge-radius: var(--rounded-full);}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.