Skip to content

Labels

Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date.

Labels add metadata or indicate status of items and navigational elements. Three different types of labels are available: Labels for adding metadata, States for indicating status, and 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:

Label contrast

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.

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.

Colored labels

Labels come in a few different functional classes. Use to communicate the content of the label, and ensure it's used consistently.

  • Label--info
  • Label--success
  • Label--warning
  • Label--danger

Label sizes

If space allows, add the Label--large modidfier to add a bit more padding to lables.

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.

Issue labels

Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.

If an issue label needs to be bigger, add the .IssueLabel--big modifier.

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. States come in a few variations that apply different colors. Use the state that best communicates the status or function.

  • State
  • State State--draft
  • State State--open
  • State State--merged
  • State State--closed

Small states

Use State--small for a state label with reduced padding a smaller font size. This is useful in denser areas of content.

Counters

Use the Counter component to add a count to navigational elements and buttons. Counters come in 3 variations:

  1. the default Counter,
  2. the Counter--primary with a stronger background color
  3. and Counter--secondary with a more subtler text color.

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.

You can also have icons and emoji in counters. Or use utilities for counters with different background colors.

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.

Use the color-text-success and color-text-danger utilities to add additional information about the size of the diff.