Badge

Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object.

// CSS
@import url("https://magnificentui.netlify.app/src/components/badge/badge.css");

// HTML
<link rel="stylesheet" href="https://magnificentui.netlify.app/src/components/badge/badge.css">

The badge component has 2 positions each having sizes lg(large) and sm(small) and three colors as follows:
pos-right-top-lg pos-left-top-lg pos-right-top-sm pos-left-top-sm

Badge with Text

Text with a large badge 1 Text with a small badge 1 Text with large badge 9+

//In parent tag add badge_base class and in child tag add badge class
//  with color, size and position as shown below

//large badge
<span class="badge_base h2">
	//Text Goes Here
	<span class="badge color--primary width_height--lg pos-right-top-lg">
		1
	</span>
</span>

//small badge
<span class="badge_base h3">
	//Text Goes Here
	<span class="badge color--secondary width_height--sm pos-right-top-sm">
		1
	</span>
</span>

<span class="badge_base h3">
	Text with large badge
	<span class="badge color--primary width_height--lg pos-right-top-lg">
	9+
	</span>
</span>

Badge with Button

Button with a large badge on the left Button toggles badge visibility

<span class="h4">Button with a large badge on the left</span>
<button class="button--primary badge_base color--primary">
	Action
	<span class="badge color--secondary width_height- -lg pos-left-top-lg">
		8
	</span>
</button>

//Add onclick for toggle visibility
<span class="h5">Button toggles badge visibility</span>
<button onclick="toggleBadgeVisibility()" class="hide-btn badge_base button--primary">
	Hide
	<span id="badgetoggle1" class="badge color--primary width_height- -lg pos-right-top-lg">
		7
	</span>
</button>

Badge with Icon

Icon with a badge 15+

<icon class="badge_base">
	<svg ...></svg>
	<span class="badge color--secondary width_height--lg icon_badge">15+</span>
</icon>

Note: Used 10px as root font size.