You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/content/components/labels.md
+41-39Lines changed: 41 additions & 39 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,38 +23,32 @@ The base `Label` style does not apply a background color and only uses the defau
23
23
24
24
### Label contrast
25
25
26
-
Use `Label--gray` to create a label with a lighter text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors.
26
+
Use `Label--primary` to create a label with a stronger border. This label is also neutral in color, however, since its border is stronger it can stand out more compared to the default `Label`.
27
27
28
-
Use `Label--gray-darker` to create a label with a dark-gray color and border. This label is also neutral in color, however, since its color is darker it can stand out more compared to `Label--gray`.
28
+
Use `Label--secondary` to create a label with a subtler text color. This label is neutral in color and can be used in contexts where all you need to communicate is metadata, or where you want a label to feel less prominent compared with labels with stronger colors.
Labels come in a few different themes. Use a theme that helps communicate the content of the label, and ensure it's used consistently. A typical use of the themes are:
38
+
Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently.
Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.
57
-
58
52
### Label sizes
59
53
60
54
If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
@@ -97,32 +91,34 @@ If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
97
91
98
92
## States
99
93
100
-
Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.
101
-
102
-
```html live title="State"
103
-
<spanclass="State">Default</span>
104
-
```
94
+
Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background. States come in a few variations that apply different colors. Use the state that best communicates the status or function.
105
95
106
-
### State themes
107
-
108
-
States come in a few variations that apply different colors. Use the state that best communicates the status or function.
@@ -145,12 +141,18 @@ Use `State--small` for a state label with reduced padding a smaller font size. T
145
141
146
142
## Counters
147
143
148
-
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations: the default `Counter` with a light gray background, the `Counter--gray-light` with a lighter text color, and `Counter--gray` with a dark-gray background and inverse white text. When a counter is empty, its visibility will be hidden.
144
+
Use the `Counter` component to add a count to navigational elements and buttons. Counters come in 3 variations:
145
+
146
+
1. the default `Counter`,
147
+
2. the `Counter--primary` with a stronger background color
148
+
3. and `Counter--secondary` with a more subtler text color.
149
+
150
+
Note: When a counter is empty, its visibility will be hidden.
Use the `Counter` in navigation to indicate the number of items without the user having to click through or count the items, such as open issues in a GitHub repo. See more options in [navigation](./navigation).
By default `<a>` elements already use the right link color and apply an underline on hover.
10
+
11
+
```html live
12
+
Some text with a default <ahref="#url">link</a>
13
+
```
14
+
15
+
If you need to make other elements behave like a link and perhaps use JS to trigger navigating to another page, use the `.Link` class.
16
+
17
+
```html live
18
+
Some text with a <spanclass="Link">span that behaves like a link</span>
19
+
```
20
+
21
+
If you like to override the default link styles you can do so with the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
22
+
23
+
Use `.Link--primary` to turn the link color to blue only on hover.
24
+
25
+
```html live
26
+
<pclass="color-text-secondary">Some text with a <aclass="Link--primary"href="#url">Link--primary</a></p>
27
+
```
28
+
29
+
Use `.Link--secondary` for a more subtle link color that turns blue on hover.
30
+
31
+
```html live
32
+
Some text with a <aclass="Link--secondary"href="#url">Link--secondary</a>
33
+
```
34
+
35
+
Use `.Link--muted` also removes the underline on hover. Tip: You can also use the `.no-underline` utility to do the same for `.Link--primary`.
36
+
37
+
```html live
38
+
<p>Some text with a <aclass="Link--secondary no-underline"href="#url">Link--muted</a></p>
39
+
<p>Some text with a <aclass="Link--primary no-underline"href="#url">Link--primary no-underline</a></p>
40
+
```
41
+
42
+
Use `.Link--onHover` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
Copy file name to clipboardExpand all lines: docs/content/components/marketing-buttons.md
+9-8Lines changed: 9 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,18 +8,18 @@ bundle: marketing-buttons
8
8
9
9
Marketing buttons come in different colors and sizes, and are also available in a blue outlined version.
10
10
11
-
## Colorsand outlined
11
+
## Colors, outlined and transparent
12
12
13
13
Marketing buttons can be solid blue, outlined blue, solid green, or transparent.
14
14
15
15
The solid blue and solid green buttons have more visual emphasis than the blue outlined button, therefore they should be used sparingly and only for call to actions that need emphasis.
**Warning**: Only use the "latest" version for short lived experiments. To be safe it's recommended to use the [latest version](https://github.com/primer/css/releases/latest) spelled out (for example `@15.2.0`). This ensures that the constant changes to Primer CSS won't break anything.
0 commit comments