Blaze UI Badges Attributes

Last Updated : 06 May, 2022

Blaze UI is a framework-free open source UI toolkit that uses JavaScript components to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. This framework allows us to use various of its styles and properties to make a website more user-friendly.

Blaze UI provides some features to add badges to the website. Blaze UI is used to add additional information to the content. They come in handy when you need to provide more information. For example, a project’s version number or individual item status notifications.

There are three attributes offered by Blaze UI Badge:

type: This attribute specifies the color of the badges. There are 6 types of badges, Default, Brand, Warning, Info, Success, and Error.
rounded: This attribute specifies the curved border of the badges.
ghost: This attribute removes the badge’s bodies, it allows badges to show only borders.

Blaze UI Badges CSS classes:

c-badge: This class is used to add badges.
c-badge–rounded: This class is used to add rounded badges.
c-badge–ghost: This class is used to add the ghost attribute to the badges.

We can add Badges using the blaze-badge tag provided by Blaze UI without defining any class. For this follow the following given syntax.

Syntax:

<blaze-badge ghost type="..." rounded >
    ...
</blaze-badge>

We can add badges using the badge classes provided by Blaze UI.

Syntax:

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

Example 1: The following code demonstrates the Blaze UI badge attributes using the Blaze UI badges tag.

HTML

<!DOCTYPE html>
<html>
<head>
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        Blaze UI Default Badge 
    </h3>
    <blaze-badge type="default">
        GeeksforGeeks
    </blaze-badge>
    <h3>
        Blaze UI Success Rounded Badge 
    </h3>
    <blaze-badge type="success" rounded>
        GeeksforGeeks
    </blaze-badge>
    <h3>
        Blaze UI Info Badge 
    </h3>
    <blaze-badge type="info" ghost>
        GeeksforGeeks
    </blaze-badge>
</body>
</html>

Output:

Example 2: The following code demonstrates the Blaze UI badge attributes using the Blaze UI CSS Classes.

HTML

<!DOCTYPE html>
<html>
<head>
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css">
</head>
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>
        Blaze UI Default Badge using CSS class
    </h3>
    <span class="c-badge">GeeksforGeeks</span>
    <h3>
        Blaze UI Success Rounded Badge using CSS class
    </h3>
    <span class="c-badge c-badge--rounded c-badge--success">
        GeeksforGeeks
    </span>
    <h3>
        Blaze UI Info Badge using CSS class
    </h3>
    <span class="c-badge c-badge--ghost c-badge--info">
        GeeksforGeeks
    </span>
</body>
</html>