Open In App

Primer CSS Labels Modifiers

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
          "width = device-width, initial-scale = 1">
  
    <link rel="stylesheet" href=
</head>
  
<style>
    body{
        background-color:lightgrey;
        text-align:center;
    }
</style>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>Primer CSS Inline Styles</h3><br><br>
      
    <span class="Label">Default</span>
    <span class="Label Label--primary ml-1">Primary</span>
    <span class="Label Label--secondary ml-1">Secondary</span>
</body>
</html>


Output:

 

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width = device-width, initial-scale = 1">
  
    <link rel="stylesheet" href=
</head>
<style>
    body{
        background-color:lightgrey;
        text-align:center;
    }
    span{
        background-color:lightblue;
    }
</style>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>Primer CSS Issue Label</h3><br><br>    
    <span class="IssueLabel color-bg-accent-emphasis 
                 color-fg-on-emphasis mr-2">
         GeeksforGeeks
    </span>
    <span class="IssueLabel color-bg-danger-emphasis 
                 color-fg-on-emphasis mr-2">
        Practice ????
    </span>
    <span class="IssueLabel color-bg-success-emphasis 
                color-fg-on-emphasis mr-2">About</span>
</body>
</html>


Output:

 

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width = device-width, initial-scale = 1">
  
    <link rel="stylesheet" href=
  
    <style>
        body{
            background-color:lightgrey;
            text-align:center;
        }
        span{
            background-color:black;
            color:yellow;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>Primer CSS Size of Labels</h3><br><br>
      
    <span class="IssueLabel color-bg-accent-emphasis 
                 color-fg-on-emphasis mr-2 p-3">
          GeeksforGeeks
    </span>
    <span class="IssueLabel color-bg-danger-emphasis 
                 color-fg-on-emphasis mr-2 p-4">
         Practice ????
    </span>
    <span class="IssueLabel color-bg-success-emphasis 
                          color-fg-on-emphasis mr-2 p-6">
         About
    </span>
</body>
</html>


Output:

 

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Labels </title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" />    
    <style>
        .Label
        {
            background-color:black;
            color:yellow;        
        }
    </style>
</head>
<body>
    <center>
        <h1 class="color-fg-success"
            GeeksforGeeks 
        </h1>
        <br>
        <h3> Primer CSS Labels </h3>
          
        <span class="Label pt-4 pr-4 pl-4 pb-4">Default</span>
  
        <span class="Label Label--primary mr-1 
                     mt-2 pt-4 pr-4 pl-4 pb-4" >
              Primary Label
        </span>
        <span class="Label Label--secondary mr-1 
                    mt-2 pt-4 pr-4 pl-4 pb-4">
              Secondary Label
        </span>
        <br><br>        
    </center>
</body>
</html>


Output: 

 

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title> Primer CSS Labels </title>
    <link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
          rel="stylesheet" />
  
    <style>
        body
        {
            background-color:black;
            color:white;
        }
        .Label
        {            
            color:black;
            background-color:lightgreen;            
        }
    </style>
</head>
<body>
    <center>
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <br>
        <h2> Primer CSS Labels </h2>
        </br>
        <h3>Colored Label</h3><br>
        <span class="Label mr-1 Label--accent">Accent</span>
        <span class="Label mr-1 Label--success">Success</span>
        <span class="Label mr-1 Label--attention">Attention</span>
        <span class="Label mr-1 Label--severe">Severe</span>
        <span class="Label mr-1 Label--danger">Danger</span>
        <span class="Label mr-1 Label--open">Open</span>
        <span class="Label mr-1 Label--closed">Closed</span>
        <span class="Label mr-1 Label--done">Done</span>
        <span class="Label mr-1 Label--sponsors">Sponsors</span>
        </br></br>
        <h2>Issue Label</h2><br>
        <span class="IssueLabel color-bg-accent-emphasis 
                     color-fg-on-emphasis mr-1">
                GfG
        </span>
        <span class="IssueLabel color-bg-danger-emphasis 
                    color-fg-on-emphasis mr-1">
                About
        </span>
        <span class="IssueLabel color-bg-success-emphasis 
                     color-fg-on-emphasis mr-1">
                help
        </span>
        <span class="IssueLabel color-bg-attention-emphasis 
                  color-fg-on-emphasis mr-1">
                  CS
        </span>
        </br></br>
        <h2>States</h2>
        </br>
        <span class="State State--draft mr-2">
            Draft
        </span>
        <span class="State State--open mr-2">
            Open
        </span>        
        <span class="State State--merged mr-2">
             Merged
        </span>        
    </center>
</body>
</html>


Output:

 

Reference: https://primer.style/css/components/labels#states



Last Updated : 13 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads