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 =
< 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 =
< 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 >
|
Output:
Blaze UI Badges
Reference: https://www.blazeui.com/components/badges/
Share your thoughts in the comments
Please Login to comment...