Primer CSS 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 Labels that provide some metadata to the user or indicates the status of an item. There are 3 types of labels, Labels to indicate metadata, States to show the status, and Counters to indicate the count of a number of items. In this article, we will discuss the Labels that provide some metadata. along with examples.

Primer CSS Labels used classes:

• Label: This class is used to define a label.
• Label--primary: This class is used to define a primary label that has a stronger border.
• Label--secondary: This class is used to define a secondary label that has a subtler 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.

Syntax:

<span class="Label <label-classes>">
 ...
</span>

Example 1: Below example demonstrates the use of Primer CSS Labels using State--primary and State--secondary classes.

Output:

Example 2: Below example demonstrates the use of Primer CSS Labels using different colored labels.

Output:

Example 3: Below example demonstrates the use of Primer CSS Labels using large size labels.

Output:

Example 4: Below example demonstrates the use of Primer CSS Labels using inline labels.

Output: