Primer ViewComponents v0.35.1

Previews

No matching results.

x
1
2
3
4
5
<!-- Default -->
<span data-view-component="true" class="Label">Default</span>
<!-- Inline -->
<span data-view-component="true" class="Label Label--inline">Inline</span>
1
2
3
4
5
# Default
render(Primer::Beta::Label.new) { "Default" }
# Inline
render(Primer::Beta::Label.new(inline: true)) { "Inline" }

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);
}