Swavy UI badge or label is used for dislaying implicit content in an HTML page. Below is the code snippet for Swavy UI 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>
<h1>Swavy UI Heading With <span class="sw_badge bg-walnut st-white sw_rsq-1">Badge</span></h1>
<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>
Support us to contribute to the continuous development of Swavy UI and other open source software.
SPONSOR