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/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">w3wiki</h1> <strong>SPECTRE Badges Class</strong> <br><br> <div> <strong> <u>Badge on Avatar:</u> w3wiki </strong> <figure class="avatar badge" data-badge="14"> <img src="https://media.w3wiki.net/wp-content/uploads/20220123013311/gfg-200x200.png" alt="GeekdforBeginner"> <i class="avatar-presence busy"></i> </figure> <p>A Computer Science Portal for Beginner</p> <br> <strong> <u>Badge on Button:</u> w3wiki </strong> <button class="btn btn-success badge" data-badge="2"> Check Updates </button> </div> </center></body></html> |
Output:
Spectre Badges
Reference: https://picturepan2.github.io/spectre/components/badges.html#badges