---
title: Labels
path: components/labels
status_issue: 'https://github.com/github/design-systems/issues/332'
status: Stable
source: 'https://github.com/primer/css/tree/master/src/labels'
bundle: labels
---
Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: [Labels](#default-label-styles) for adding metadata, [States](#states) for indicating status, and [Counters](#counters) for showing the count for a number of items.
## Labels
The base label component styles the text, adds padding and rounded corners, and a border. Labels come in various themes which apply different colors.
GitHub also programmatically generates and applies a background color for labels on items such as issues and pull requests. Users are able to select any background color and the text color will adjust to work with light and dark background colors.
The base `Label` style does not apply a background color and only uses the default border:
```html live
design
```
**Note:** Be sure to include a title attribute on labels, as it's helpful for people using screen-readers to differentiate a label from other text. For example, without the title attribute, the following case would read as _"New select component design"_, rather than identifying `design` as a label.
```html live
New select componentdesign
```
### Label contrast
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.
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`.
```html live
DefaultGrayDark gray
```
### Colored labels
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:
- `Label--yellow` -> Pending/highlight
- `Label--orange` -> Warning
- `Label--red` -> Error
- `Label--green` -> Success
- `Label--blue` -> Info
```html live
PendingWarningErrorSuccessInfoPROSponsor
```
Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.
### Label sizes
If space allows, add the `Label--large` modidfier to add a bit more padding to lables.
```html live
DefaultLarge
```
### Inline labels
Sometimes when adding a label the line-height can be incrased. Or the parent element increases in height. If that is not desired, use the `Label--inline` modifier change to the `display` property to `inline`. The font-size also adapts.
```html live
Lorem Ipsum is simply dummy textof the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.
```
## Issue labels
Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.
```html live
Primerbug 🐛help wanted🚂 deploy: train
```
If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
```html live
Primerbug 🐛help wanted🚂 deploy: train
```
## States
Use state labels to inform users of an items status. States are large labels with bolded text. The default state has a gray background.
```html live title="State"
Default
```
### State themes
States come in a few variations that apply different colors. Use the state that best communicates the status or function.
```html live
Open
Closed
Merged
```
**Note:** Similar to [labels](#labels), you should include the title attribute on states to differentiate them from other content.
### Small states
Use `State--small` for a state label with reduced padding a smaller font size. This is useful in denser areas of content.
```html live
Default
Open
Closed
```
## Counters
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.
```html live
123456
```
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).
```html live
```
You can also have icons and emoji in counters. Or use utilities for counters with different background colors.
```html live
1.5K
10
👍 2222222
```
## Diffstat
Diffstats show how many deletions or additions a diff has. It's typically a row of 5 blocks that get colored with green or red.
```html live
6
```
Use the `text-green` and `text-red` utilities to add additional information about the size of the diff.
```html live
+7−2
```