Spectre Badges

Last Updated : 21 Feb, 2022

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/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/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>