button

Smart.Badge


Badges may be used to put label or count next to a component.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Contextual

Default Primary Success Info Warning Danger

Pills

Light Dark Info Success Warning Danger

Source

<h1>Example heading <span class="smart-badge smart-badge-dark">New</span></h1>  
<h2>Example heading <span class="smart-badge smart-badge-dark">New</span></h2>  
<h3>Example heading <span class="smart-badge smart-badge-dark">New</span></h3>  
<h4>Example heading <span class="smart-badge smart-badge-dark">New</span></h4>  
<h5>Example heading <span class="smart-badge smart-badge-dark">New</span></h5>  
<h6>Example heading <span class="smart-badge smart-badge-dark">New</span></h6>  
<h1>Contextual</h1>  
<span class="smart-badge smart-badge-light">Default</span>  
<span class="smart-badge smart-badge-dark">Primary</span>  
<span class="smart-badge smart-badge-info">Success</span>  
<span class="smart-badge smart-badge-success">Info</span>  
<span class="smart-badge smart-badge-warning">Warning</span>  
<span class="smart-badge smart-badge-danger">Danger</span>  
<h1>Pills</h1>  
<span class="smart-badge smart-badge-light smart-badge-pill">Light</span>  
<span class="smart-badge smart-badge-dark smart-badge-pill">Dark</span>  
<span class="smart-badge smart-badge-info smart-badge-pill">Info</span>  
<span class="smart-badge smart-badge-success smart-badge-pill">Success</span>  
<span class="smart-badge smart-badge-warning smart-badge-pill">Warning</span>  
<span class="smart-badge smart-badge-danger smart-badge-pill">Danger</span>  

SUPPORT & LEARNING RESOURCES

LICENSE & DOWNLOAD