Open In App

Spectre Labels Rounded labels

Improve
Improve
Like Article
Like
Save
Share
Report

The Spectre Labels are formatted text tags for highlighting informative information. In this article, we will learn how to create rounded or pill-shaped labels. The default shape of the label is square. We can choose the color of the label by applying the color classes as we all know primary, success, error, etc. To change the color we have to use label color. To create labels you have to add the label class to <span> or <small> elements.

Spectre Labels Rounded labels class:

  • label-rounded: This class is used to shape the labels into a pill shaped label.

Syntax:

<span class="label label-rounded label-primary">
    primary label
</span>

Below example illustrate the Spectre Labels Rounded labels:

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>SPECTRE CSS Icons Class</title>
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
    <link rel="stylesheet"
        href=
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Labels Rounded labels</strong>
        <br><br>
            <div>
                <div>
                <strong><u>Labels on span Elements:</u></strong>
                <br>
                <span class="label label-rounded">
                    Default label
                </span>
                <span class="label label-rounded 
                             label-primary">
                    Primary label
                </span>
                <span class="label label-rounded 
                             label-success">
                    Success label
                </span>
                <span class="label label-rounded 
                             label-error">
                    Error label
                </span>
                <span class="label label-rounded 
                             label-warning">
                    Warning label
                </span>
                </div>
                <br>
                <div>
                <strong><u>Labels on small Elements:</u></strong>
                <br>
                <small class="label label-rounded">
                    Default label
                </small>
                <small class="label label-rounded 
                             label-primary">
                    Primary label
                </small>
                <small class="label label-rounded 
                             label-success">
                    Success label
                </small>
                <small class="label label-rounded 
                             label-error">
                    Error label
                </small>
                <small class="label label-rounded 
                             label-warning">
                    Warning label
                </small>
                </div>
            </div>
     </center>
</body>
  
</html>


Output:

Spectre Labels Rounded labels

Spectre Labels Rounded labels

Reference: https://picturepan2.github.io/spectre/elements/labels.html#labels-rounded



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