# Tag

### [Interactive demo](https://vision.crimsonlogic.studio/jds/v1.2/components.html#tag-wrapper)

## Colours

<div align="left"><figure><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MVPzFJV0KiMDuBMGmVD%2Fuploads%2FLvQ355LGfIbbDJMEJInS%2Fimage.png?alt=media&#x26;token=dcdcc51e-da99-4674-81ec-e7a0191a2b9e" alt=""><figcaption></figcaption></figure></div>

```
  <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

<div align="left"><figure><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MVPzFJV0KiMDuBMGmVD%2Fuploads%2F4Ls2tBsoXvgePq589Oes%2Fimage.png?alt=media&#x26;token=331a6309-607b-4f86-8c6d-a6046dc2c76f" alt=""><figcaption></figcaption></figure></div>

### 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

<div align="left"><figure><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MVPzFJV0KiMDuBMGmVD%2Fuploads%2FtzBkRHz3rm0qTKEcr6aV%2Fimage.png?alt=media&#x26;token=424c63ff-dacd-42f8-a5aa-ff8a13c8d1b8" alt=""><figcaption></figcaption></figure></div>

#### To show the categorization or group

<div align="left"><figure><img src="https://2758270529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MVPzFJV0KiMDuBMGmVD%2Fuploads%2FziP5l7016mKv8woLbXou%2Fimage.png?alt=media&#x26;token=6438667b-a2ba-40a0-80eb-1682a0b258e7" alt=""><figcaption></figcaption></figure></div>
