x
1
<span data-view-component="true" class="Label">Label</span>
1
render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
No notes provided.
Param | Description | Input |
---|---|---|
— |
|
|
— |
|
|
— |
|
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
/* Labels *//* Provide a wrapper to ensure labels stick together */.labels { position: relative;}/* Default 20px */.label, /* TODO: Deprecate */.Label { display: inline-block; padding: 0 7px; font-size: var(--text-body-size-small,0.75rem); font-weight: var(--base-text-weight-medium,500); line-height: 18px; white-space: nowrap; border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-default,var(--color-border-default)); border-radius: 2em;}.label:hover, .Label:hover { -webkit-text-decoration: none; text-decoration: none; }/* Large 24px */.Label--large { padding-right: 10px; padding-left: 10px; line-height: 22px;}/* Inline *//* Doesn't increase height of parent element** Can be used with different font-sizes */.Label--inline { display: inline; padding: 0.12em 0.5em; font-size: 85%;}/* Contrast */.Label--primary { color: var(--fgColor-default,var(--color-fg-default)); border-color: var(--borderColor-neutral-emphasis,var(--color-fg-subtle));}.Label--secondary { color: var(--fgColor-muted,var(--color-fg-muted)); border-color: var(--borderColor-default,var(--color-border-default));}/* Colors */.Label--info, /* TODO: deprecate */.Label--accent { color: var(--fgColor-accent,var(--color-accent-fg)); border-color: var(--borderColor-accent-emphasis,var(--color-accent-emphasis));}.Label--success { color: var(--fgColor-success,var(--color-success-fg)); border-color: var(--borderColor-success-emphasis,var(--color-success-emphasis));}.Label--warning, /* TODO: deprecate */.Label--attention { color: var(--fgColor-attention,var(--color-attention-fg)); border-color: var(--borderColor-attention-emphasis,var(--color-attention-emphasis));}.Label--severe { color: var(--fgColor-severe,var(--color-severe-fg)); border-color: var(--borderColor-severe-emphasis,var(--color-severe-emphasis));}.Label--danger { color: var(--fgColor-danger,var(--color-danger-fg)); border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis));}.Label--open { color: var(--fgColor-open,var(--color-open-fg)); border-color: var(--borderColor-open-emphasis,var(--color-open-emphasis));}.Label--closed { color: var(--fgColor-closed,var(--color-closed-fg)); border-color: var(--borderColor-closed-emphasis,var(--color-closed-emphasis));}.Label--done { color: var(--fgColor-done,var(--color-done-fg)); border-color: var(--borderColor-done-emphasis,var(--color-done-emphasis));}.Label--sponsors { color: var(--fgColor-sponsors,var(--color-sponsors-fg)); border-color: var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));}