Tag

Use tags to label, categorize, or organize items using keywords that describe them.

Interactive demo

Colours

  <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-left">As status indicators</h4>
                    <div class="pb-4 text-left">
                        <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>
                    <h4 class="text-left">To categorize content</h4>
                    <div class="pb-4 text-left">
                        <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>

Usage

Used as a method of filtering data

Tags as Indicators (without label)

To indicate the status

Appears next to user avatars with eye-catching appeal. Status shown below are Available, Away, Busy and Offline

To show the categorization or group