Spectre Badges

Spectre Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that they have more rounded corners.

Spectre Badges Class:

badge: This class is used to create a badge mark on buttons, icons, avatars.

Note: You need to add data-badge attribute to mention the numbers. If there is no data-badge or the attribute is not specified, the badge will appear as a dot.

Syntax:

<span class="badge" data-badge="..">
  ...
</span>

Below example illustrate the Spectre Badges:

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
</head>

<body>
    <center>
    <h1 class="text-success">GeeksforGeeks</h1>
    <strong>SPECTRE Badges Class</strong>
    <br><br>
    <div>
        <strong>
            <u>Badge on Avatar:</u>
         Geeksforgeeks
        </strong>
        <figure class="avatar badge" 
                data-badge="14">
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg-200x200.png" 
                 alt="Geekdforgeeks">
            <i class="avatar-presence busy"></i>
        </figure>
        

<p>A Computer Science Portal for Geeks</p>



        <br>
        <strong>
            <u>Badge on Button:</u>
        Geeksforgeeks
        </strong>
        <button class="btn btn-success
                       badge" 
                data-badge="2">
            Check Updates
        </button>
    </div>
    
    </center>
</body>
</html>

Output:

Reference: https://picturepan2.github.io/spectre/components/badges.html#badges

Explore