Primer CSS Labels Modifiers

Primer CSS is a free open-source CSS framework built upon a GitHub design system to support the broad spectrum of GitHub websites. It creates 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 a highly reusable model.

Primer CSS labels:

Add metadata or indicate the status of items and navigational elements. Labels are small words that will tell what kind of information we are including in the webpage or what kind of input we are providing. Name label will tell the user to put their name into that field and there are three types of labels, Labels to indicate metadata, States to show the status, and Counters to indicate the count of a number of items. Issue labels are for adding labels to issues and pull requests.

Primer Label classes:

• Labels: This class is used to specify labels.
• Label--primary: This class is used to define a primary label that has a stronger border.
• Labe--secondary: This class is used to define a secondary label that has a subtle text color.
• Label--accent: This class is used to define a blue-colored label.
• Label--success: This class is used to define a green-colored label.
• Label--attention: This class is used to define a golden-colored label.
• Label--severe: This class is used to define a brown-colored label.
• Label--danger: This class is used to define a red-colored label.
• Label--sponsors: This class is used to define a purple-colored label.
• Label–large: This class is used to define a label having some extra padding.
• Label–inline: This class is used to define an inline label.

Various ways to modify labels are listed below:

• Label-inline: In this way, you can display the elements in the block.
• Issue labels: In this way, you can add labels to issue and pull requests, 
• Label size: In this way, you can increase the size of the label. 

Syntax:

<span class="Label Label--primary">
 ...
</span>

Note: Replace the above classes as per the need.

Example 1: In this example, we will set the height and width of an image using inline styles.

Output:

👁 Image

Example 2: In the below code, we will include the classes to issue labels.

Output:

👁 Image

Example 3: In the below code, we will include the classes to increase the size of the labels. 

Output:

👁 Image

Example  4: In the below code, we will see how you can modify the label.

Output: 

👁 Image

Example 5: The following code demonstrates the colored labels, and state labels for items.

Output:

👁 Image

Reference: https://primer.style/#states