<h3 class="my-3">Dark</h3>
<span class="jds-tag has-primary">Primary</span> <span class="jds-tag has-secondary">Secondary/Info</span> <span class="jds-tag has-success">Success</span> <span class="jds-tag has-error">Error</span> <span class="jds-tag has-warning">Warning</span> <span class="jds-tag has-example">Example</span>
<h3 class="mt-5">Light</h3>
<span class="jds-tag has-primary-light">Primary</span> <span class="jds-tag has-secondary-light">Secondary/Info</span> <span class="jds-tag has-success-light">Success</span> <span class="jds-tag has-error-light">Error</span> <span class="jds-tag has-warning-light">Warning</span> <span class="jds-tag has-example-light">Example</span>
<h3 class="mt-5">Clickable</h3>
<a class="jds-tag-link" href="#"><span class="jds-tag has-primary">Primary</span></a> <a class="jds-tag-link" href="#"><span class="jds-tag has-primary-light">Primary</span></a>
<h3 class="mt-5">Tags as Indicators (without label)</h3>
<span class="tag-indicator bg-primary"></span> <span class="tag-indicator bg-secondary"></span> <span class="tag-indicator bg-yellow"></span> <span class="tag-indicator bg-red"></span> <span class="tag-indicator bg-green"></span> <span class="tag-indicator bg-purple"></span>
<h3 class="mt-5">Usage</h3>
<h4 class="text-start">As status indicators</h4>
<div class="pb-4 text-start"> <a href="javascript:void(0);" class="user-status available" title="Available"> <i class="fas fa-user"></i></a> <span class="mx-3"></span> <a href="javascript:void(0);" class="user-status away" title="Away"> <i class="fas fa-user"></i></a> <span class="mx-3"></span> <a href="javascript:void(0);" class="user-status busy" title="Busy"> <i class="fas fa-user"></i></a> <span class="mx-3"></span> <a href="javascript:void(0);" class="user-status offline" title="Offline"> <i class="fas fa-user"></i></a> <span class="mx-3"></span> </div>
Appears next to user avatars with eye-catching appeal. Status shown below are Available, Away, Busy and Offline
