Tag

Tags allow users to categorize, label or organize content using keywords.

Shape

There are two border tag styles, the default shape is rounded. You can add the qtm-tag-rounded class to make a rounded tag or the qtm-tag-sharp class to make sharp tag.

Default TagRounded TagSharp Tag

<div class="qtm-tag">Default Tag</div>
<div class="qtm-tag qtm-tag-rounded">Rounded Tag</div>
<div class="qtm-tag qtm-tag-sharp">Sharp Tag</div>

Sizes

The tag comes in 2 different sizes with following classes: qtm-small, qtm-medium.

While the default size is the medium one, the qtm-medium class exists in case you need to reset the tag to its medium size.

Small TagMedium Tag

Small TagMedium Tag

<div class="qtm-tag qtm-small">
  <i class="qtm-icon material-icons">train</i>
  <span>Small Tag</span>
</div>
<div class="qtm-tag qtm-medium">
  <i class="qtm-icon material-icons">train</i>
  <span>Medium Tag</span>
</div>
<div class="qtm-tag qtm-tag-sharp qtm-small">
  <i class="icon material-icons">train</i>
  <span>Small Tag</span>
</div>
<div class="qtm-tag qtm-medium qtm-tag-sharp">
  <i class="qtm-icon material-icons">train</i>
  <span>Medium Tag</span>
</div>

Interactive tag

Interactive

With class qtm-interactive, the tags change appearance on press, hover, and click. Beside, the tags with tabindex="0" can be focused when users use tab keyboard navigation

Div tag

Span tag

Anchor tag

Selected tag

<div class="qtm-tag qtm-interactive" tabindex="0">Div tag</div>
<span class="qtm-tag qtm-interactive" tabindex="0"> Span tag </span>
<button class="qtm-tag qtm-interactive">Button tag</button>
<a class="qtm-tag qtm-interactive" href="#" tabindex="0"> Anchor tag </a>
<span class="qtm-tag qtm-interactive qtm-selected" tabindex="0">
  Selected tag
</span>

Tag button

You can append a element with class qtm-tag-button so this element can change appearance on hover.

Tag Button

<div class="qtm-tag">
  <span>Tag Button</span>
  <i class="qtm-icon material-icons qtm-tag-button">close</i>
</div>
<!-- Alternative ways -->
<div class="qtm-tag">
  <span>Static Tag</span>
  <a href="#" class="qtm-tag-button">
    <i class="qtm-icon material-icons">close</i>
  </a>
</div>
<div class="qtm-tag">
  <span>Static Tag</span>
  <button class="qtm-tag-button">
    <i class="qtm-icon material-icons">close</i>
  </button>
</div>

Selected

You can style a selected tag by adding qtm-selected class in this qtm-tag element.

Basic Tag

<div class="qtm-tag qtm-selected qtm-interactive" tabindex="0">
  <span>Basic tag</span>
  <i class="qtm-icon material-icons qtm-tag-button">close</i>
</div>

Colors

Tags are available in 8 colors with following classes: qtm-primary, qtm-lightblue, qtm-green, qtm-orange, qtm-red, qtm-yellow, qtm-bluegrey, qtm-purple. The default color is the primary color.

Primary

Light blue

Green

Orange

Red

Yellow

Bluegrey

Purple

<!-- Primary -->
<div class="qtm-tag qtm-interactive qtm-primary" tabindex="0">
  <span>Tag</span>
  <i class="qtm-icon material-icons qtm-tag-button">close</i>
</div>
<div class="qtm-tag qtm-selected qtm-interactive qtm-primary" tabindex="0">
  <span>Selected Tag</span>
  <i class="qtm-icon material-icons qtm-tag-button">close</i>
</div>
<div class="qtm-tag qtm-disabled qtm-interactive qtm-primary" tabindex="0">
  <span>Disabled tag</span>
  <i class="qtm-icon material-icons qtm-tag-button">close</i>
</div>