Skip to main content
🏠ComponentsTagVersion: Next

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>