x
1
2
3
4
5
6
7
<div class="flex items-center flex-wrap gap-half"> <div class="badge badge--primary" style="--badge-background: var(--blue-50); --badge-color: var(--blue-700)">Blue</div> <div class="badge badge--primary" style="--badge-background: var(--green-50); --badge-color: var(--green-700)">Green</div> <div class="badge badge--primary" style="--badge-background: var(--sky-50); --badge-color: var(--sky-700)">Sky</div> <div class="badge badge--primary" style="--badge-background: var(--purple-50); --badge-color: var(--purple-700)">Purple</div> <div class="badge badge--primary" style="--badge-background: var(--red-50); --badge-color: var(--red-700)">Red</div></div>1
2
3
4
5
6
7
<div class="flex items-center flex-wrap gap-half"> <div class="badge badge--primary" style="--badge-background: var(--blue-50); --badge-color: var(--blue-700)">Blue</div> <div class="badge badge--primary" style="--badge-background: var(--green-50); --badge-color: var(--green-700)">Green</div> <div class="badge badge--primary" style="--badge-background: var(--sky-50); --badge-color: var(--sky-700)">Sky</div> <div class="badge badge--primary" style="--badge-background: var(--purple-50); --badge-color: var(--purple-700)">Purple</div> <div class="badge badge--primary" style="--badge-background: var(--red-50); --badge-color: var(--red-700)">Red</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
.badge { align-items: center; background-color: var(--badge-background, var(--color-bg)); border: 1px solid var(--badge-border-color, var(--color-border)); border-radius: var(--badge-radius, var(--rounded-3xl)); color: var(--badge-color, var(--color-text)); column-gap: var(--size-1); display: inline-flex; flex-shrink: 0; font-size: var(--text-xs); font-weight: var(--font-medium); justify-content: center; line-height: var(--leading-tight); min-inline-size: var(--badge-min-inline-size, 0); padding: var(--badge-padding, .125rem .5rem); white-space: nowrap; .icon { --icon-size: var(--size-3); }}.badge--primary { --badge-background: var(--color-primary); --badge-border-color: transparent; --badge-color: var(--color-text-reversed);}.badge--secondary { --badge-background: var(--color-secondary); --badge-border-color: transparent; --badge-color: var(--color-text);}.badge--positive { --badge-background: var(--color-positive); --badge-border-color: transparent; --badge-color: white;}.badge--negative { --badge-background: var(--color-negative); --badge-border-color: transparent; --badge-color: white;}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.