BADGE

Swavy UI badge or label is used for dislaying implicit content in an HTML page. Below is the code snippet for Swavy UI badge.

DEFAULT BADGE

To add rounded corners to Swavy UI badge, add sw_rsq-2 to the class attribute of the badge element. You can set the depth of the rounded corners ranging from 1 - 8

To set background color for Swavy UI badge, you can use any color from the color spectrum, for example, add bg-saddle_brown to the class attribute of the badge element to add background color of saddle brown

Small Normal Large
                    
<span class="sw_badge sw_badge-small" role="status">Small</span>
<span class="sw_badge sw_badge-styled bg-peach" role="status">Normal</span>
<span class="sw_badge sw_badge-outline sw_badge-large sw_rsq-4 sw_br-8 br-red">Large</span>

                    
                

BADGES EMBEDDED IN ANOTHER ELEMENT

Swavy UI Heading With Badge

                    
<h1>Swavy UI Heading With <span class="sw_badge bg-walnut st-white sw_rsq-1">Badge</span></h1>
                    
                

BADGES EMBEDDED IN A BUTTON

                    
<button type="button" class="sw_btn sw_btn-styled sw_rsq-1">
    Notifications <span class="sw_badge sw_badge-small sw_rsq-1 bg-coral st-white">4</span>
</button>

<button type="button" class="sw_btn sw_btn-large sw_rsq-1 bg-cornflower_blue sw_pos-relative sw_mlr-5">
    Inbox
    <span class="sw_badge sw_badge-small sw_rsq-6 bg-magenta sw_pos-absolute sw_pos-top sw_left-100 sw_translate">
        99+
    </span>
</button>

<button type="button" class="sw_btn sw_pos-relative">
    Profile
    <span class="sw_pos-absolute sw_pos-top sw_left-100 sw_translate sw_pd-1 bg-red sw_br-5  sw_round">
    </span>
</button>