300px
x
150px
1
2
3
4
5
<!-- Default --><span data-view-component="true" class="Label">Default</span><!-- Large --><span data-view-component="true" class="Label Label--large">Large</span>1
2
3
4
5
# Defaultrender(Primer::Beta::Label.new) { "Default" }# Largerender(Primer::Beta::Label.new(size: :large)) { "Large" }No notes provided.
No params configured.
app/components/primer/beta/label.css
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
/* Labels *//* Provide a wrapper to ensure labels stick together */.labels { position: relative;}/* Default 20px */.label, /* TODO: Deprecate */.Label { display: inline-block; padding: 0 var(--base-size-6); font-size: var(--text-body-size-small); font-weight: var(--base-text-weight-medium); /* stylelint-disable-next-line primer/typography */ line-height: 18px; white-space: nowrap; border: var(--borderWidth-thin) solid var(--borderColor-default); border-radius: var(--borderRadius-full);}:is(.label,.Label):hover { -webkit-text-decoration: none; text-decoration: none; }/* Large 24px */.Label--large { padding: 0 var(--base-size-8); /* stylelint-disable-next-line primer/typography */ line-height: 22px;}/* Inline *//* Doesn't increase height of parent element** Can be used with different font-sizes */.Label--inline { display: inline; /* stylelint-disable-next-line primer/spacing */ padding: 0.12em 0.5em; /* stylelint-disable-next-line primer/typography */ font-size: 85%;}/* Contrast */.Label--primary { color: var(--fgColor-default); border-color: var(--borderColor-neutral-emphasis);}.Label--secondary { color: var(--fgColor-muted); border-color: var(--borderColor-default);}/* Colors */.Label--info, /* TODO: deprecate */.Label--accent { color: var(--fgColor-accent); border-color: var(--borderColor-accent-emphasis);}.Label--success { color: var(--fgColor-success); border-color: var(--borderColor-success-emphasis);}.Label--warning, /* TODO: deprecate */.Label--attention { color: var(--fgColor-attention); border-color: var(--borderColor-attention-emphasis);}.Label--severe { color: var(--fgColor-severe); border-color: var(--borderColor-severe-emphasis);}.Label--danger { color: var(--fgColor-danger); border-color: var(--borderColor-danger-emphasis);}.Label--open { color: var(--fgColor-open); border-color: var(--borderColor-open-emphasis);}.Label--closed { color: var(--fgColor-closed); border-color: var(--borderColor-closed-emphasis);}.Label--done { color: var(--fgColor-done); border-color: var(--borderColor-done-emphasis);}.Label--sponsors { color: var(--fgColor-sponsors); border-color: var(--borderColor-sponsors-emphasis);}