Primer CSS Issue Labels

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS offers Issue Labels that are used to add labels for pull requests or any issue. Issue labels also support emojis. In this article, we will discuss the Issue Labels along with examples.

Primer CSS Issue Labels classes:

• IssueLabel: This class is used to create an issue label.
• IssueLabel--big: This class is used to create an issue label that has some extra padding.

Syntax:

<span class="IssueLabel color-bg-success-emphasis 
 color-fg-on-emphasis mr-1">
 ...
</span>

Example 1: Below is the code that demonstrates the use of Primer CSS Issue labels.

Output:

Example 2: Below is another code that demonstrates the use of Primer CSS Issue labels using IssueLabel--big class.

Output:

Reference: https://primer.style/#issue-labels