Blaze UI Badges

Last Updated : 13 Jun, 2022

Blaze UI is a free open-source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

A badge is an essential component of a website. It is useful when you want to add additional information such as software version numbers or for status messages that display a particular text to the user. Blaze UI provides a lot of varieties of badges, in this article we will see each and every variety of badges briefly.

Blaze UI Badges:

Blaze UI Badges Colors: This type of badge is used to define the color of the badge, we can use c-badge–color_class for that.
Blaze UI Badges Rounded: This type of badge is used to make the badge’s corner rounded, we can use c-badge–rounded class for that.
Blaze UI Badges Ghost: This type of badge is used when you want to remove the body part of any badge, we can use c-badge–ghost for that.

Note: Remember that these classes can be combined and used in a single badge which can be colored and rounded with corners with a ghost body type.

Syntax:

<span class="c-badge c-badge--badge-type">
       ...
</span>

Below are examples illustrating the Blaze UI Badges:

Example 1: This example demonstrates the Blaze UI Badges.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title> Blaze UI Badges </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
 
    <style>
        html{
            font-family: sans-serif;
        }
    </style>
</head>
 
<body>
    <div class="u-centered">
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h3> Blaze UI Badges </h3>
    </div>
 
    <div class="u-window-box-large">
        <h4> Blaze UI Badges Colors: </h4>
        <span class="c-badge c-badge--warning">
            ! Are you Sure
        </span>
        <span class="c-badge c-badge--success">
            Uploaded
        </span>
        <span class="c-badge c-badge--error">
            Delete File
        </span>
    </div>
 
    <div class="u-window-box-large">
        <h4> Blaze UI Badges Rounded: </h4>
        <span class="c-badge c-badge--rounded">
            ! Are you Sure
        </span>
        <span class="c-badge c-badge--rounded">
            Uploaded
        </span>
        <span class="c-badge c-badge--rounded">
            Delete File
        </span>
    </div>
 
    <div class="u-window-box-large">
        <h4> Blaze UI Badges Ghost: </h4>
        <span class="c-badge c-badge--ghost">
            ! Are you Sure
        </span>
        <span class="c-badge c-badge--ghost">
            Uploaded
        </span>
        <span class="c-badge c-badge--ghost">
            Delete File
        </span>
    </div>
</body>
   
</html>

Output:

Blaze UI Badges

Example 2: This example demonstrates the Blaze UI Badges.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Blaze UI Badges</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
 
    <style>
        html{
            font-family: sans-serif;
        }
    </style>
</head>
 
<body>
    <div class="u-centered">
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h3> Blaze UI Badges </h3>
    </div>
 
    <div class="u-window-box-large">
        <h4> Blaze UI Badges Combined: </h4>
        <span class="c-badge c-badge--warning
                     c-badge--rounded c-badge--ghost">
            ! Are you Sure
        </span>
        <span class="c-badge c-badge--success
                     c-badge--rounded c-badge--ghost">
            Uploaded
        </span>
        <span class="c-badge c-badge--error 
                     c-badge--rounded c-badge--ghost">
            Delete File
        </span>
    </div>
</body>
   
</html>