Tags

Tags are linkable and removable label variations.

• Tag component
• Tag sizes
• Usage
  • Via data attributes
  • Via javascript
  • Javascript methods
  • Javascript events

Tag component

Tags are keywords or terms used for organization and classification purposes, like labels, but since they serve a different purpose, they are linkable and can be removable.

Code output

HTML Markup

Copy<a class="tag">
  <span data-toggle="dismiss-tag">×</span>
  <span>Tag 1</span>
</a>
<a class="tag">
  <span data-toggle="dismiss-tag">×</span>
  <span>Tag 2</span>
</a>
<a class="tag">
  <span data-toggle="dismiss-tag">×</span>
  <span>Tag 3</span>
</a>

Tag sizes

Tag size can be adjusted by applying a class tag-'affix' where affix can be either lg, sm or xs. The class names are semantic and are irrelevant to the responsive resolution tiers.

Code output

HTML Markup

Copy<a class="tag tag-lg">
  <span data-toggle="dismiss-tag">×</span>
  <span>Large tag</span>
</a>

Copy<a class="tag">
  <span data-toggle="dismiss-tag">×</span>
  <span>Normal tag</span>
</a>

Copy<a class="tag tag-sm">
  <span data-toggle="dismiss-tag">×</span>
  <span>Small tag</span>
</a>

Copy<a class="tag tag-xs">
  <span data-toggle="dismiss-tag">×</span>
  <span>Extra small tag</span>
</a>

Usage

Tags can be manipulated using HTML data attributes or Javascript.

Via data attributes

Tags can be dismissed by using the button with the data-toggle="dismiss-tag" that is part of the initial tab component markup.

HTML Markup

Copy<a class="tag">
  <span data-toggle="dismiss-tag">×</span>
  <span>Normal tag</span>
</a>

Via Javascript

Tags that hold a unique id can be called using Javascript.

Copy$('#id').tag()

Javascript methods

A tag can be dismissed by using the following Javascript method.

Copy$('#id').tag('remove')

Javascript events

Tags that hold a unique id can be called using Javascript can expose an event at a specific triggering point to extend component functionality, that fires as soon as the pre-specified hook is reached within the Javascript code.

Copy$('#id').on('removed.sky.tag', function(e) {
  // Extend function
});