Badge

Badges are used to inform user of the status of specific data.

Text with a badge

Text with badge 1


<span class="badge__demo-txt">Text with badge</span>
<span class="badge badge-position">1</span>

Text with a large badge

Text with Large badge 2


<span class="badge__demo-txt">Text with Large badge</span>
<span class="badge badge-large badge-position">2</span>

Button with a badge

Button with a badge on the left 3


<span class="badge__demo-txt">Button with a badge on the left</span>
<span class="badge badge-position">3</span>
<button class="badge__demo-btn">Action</button>

Toggle badge visibility

Button toggles badge visibility 4


<span class="badge__demo-txt">Button toggles badge visibility</span>
<button class="badge__demo-btn">Action</button>
<span class="badge badge-position">4</span>

Icon with a badge

Icon with badge home 5


<span class="badge__demo-txt">Icon with badge</span>
<span class="material-icons">home</span>
<span class="badge badge-position">5</span>