Blaze UI Badges Colors

Last Updated : 05 May, 2022

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it.

A badge is an essential component of a website. It is useful when you want to add additional information such as software version number or for status messages that display a particular text to the user. Blaze UI Badges Colors are used to create different colors of badges using the below classes.

Blaze UI Badges Colors Classes:

c-badge: This class is used to create the default color badge.
c-badge–brand: This class is used to create the brand color badge.
c-badge–info: This class is used to create the info color badge.
c-badge–warning: This class is used to create the warning color badge.
c-badge–success: This class is used to create the success color badge.
c-badge–error: This class is used to create the error color badge.

Syntax:

<span class="c-badge Badges-Colors-Class">
    ...
</span>

Example 1: This example demonstrates the Blaze UI Badges Colors using c-badge, c-badge–brand, and c-badge–info classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Badges Colors </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3> Blaze UI Badges Colors </h3>  
  
        <span class="c-badge"> 
            GFG Default 
        </span> 
        <span class="c-badge c-badge--brand"> 
            GFG Brand 
        </span> 
        <span class="c-badge c-badge--info"> 
            GFG Info 
        </span> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Badges Colors

Example 2: This example demonstrates the Blaze UI Badges Colors using c-badge–warning, c-badge–success, and c-badge–error classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Badges Colors </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3> Blaze UI Badges Colors </h3>  
  
        <span class="c-badge c-badge--warning"> 
            GFG Warning 
        </span> 
        <span class="c-badge c-badge--success"> 
            GFG Success 
        </span> 
        <span class="c-badge c-badge--error"> 
            GFG Error 
        </span> 
    </div> 
</body> 
  
</html>