Skip to content

Tag13.10.5

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


$ npm i @if-design-system/tag@13.10.5

Edit this section

Overview

Multiple or single tags can be used to categorize items.

Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.

Edit this section

Variations

Type Purpose
Category tags Category tags help to categorize or organize items. Multiple or single tags can be used to categorize items.
Filter tags Filter tags are interactive labels that represent selected filtering options. Filter tags can be added and removed.
Input tags Input tags represent keywords in input field. Input tags can be removed.
Status tags Status tags represent status of item. Status tags use semantic colors to communicate status of item.
Edit this section

Usage

Sizing

Tags is available in two different sizes; normal and small:

Add the small-class to .if.tag to make it smaller.

Orwell
Orwell
<span class="if tag small"></span>
Edit this section

Category tags

Category tags help to categorize or organize items. Multiple or single tags can be used to categorize items.

  • Corporate
  • Baltic
  • Private
  • IT

Usage

Use category tags when content is mapped to multiple categories, and the user needs a way to differentiate between them. Colored variation of category tags can be used to bring more attention to them.

<ul class="if tags">
  <li class="if">
    <a href="/sadsd" class="if tag">
      Baltic
    </a>
  </li>
  <li class="if">
    <a href="/sadsd" class="if tag">
      IT
    </a>
  </li>
</ul>

A category tag can be in a list.

Baltic
<a href="/sadsd" class="if tag">
  Baltic
</a>

A category tag can also be a standalone element.

Behaviours

List of category tags should be arranged horizontally. When horizontal space is limited in a tag group, the individual tags wrap to form another line. Category tags can act as a links to filtered lists of items tagged with them.

The category tag has special behaviours. However, it can be a link. See next section for documentation.

Interactions

A category tag can be interactive, i.e. a link:

Hover
Style
  1. The outline color is BL 1 DARK, DARK BLUE
  2. The text color is BL 1 DARK, DARK BLUE
Focus
Style
  1. The color used for the focus ring is CB 3, LIGHT BLUE
Active
Style
  1. The outline color is BL 1 DARK, DARK BLUE
  2. The text color is BL 1 DARK, DARK BLUE

Modifiers

Colors

A category tag can have different fills:

Style
  1. The fill color is CY 3, LIGHT YELLOW
  2. The fill color is CG 3, LIGHT GREEN
  3. The fill color is CR 3, LIGHT RED
  4. The fill color is CB 3, LIGHT BLUE

The background colors used is blended with mix-blend-mode: multiply; and opacity: 0.5;

Passive
Style
  1. The outline color is LB 1, LIGHT BROWN
  2. The text color is LB 1, LIGHT BROWN
<a href="/sadsad" class="if tag passive"></a>

Only links can be `.passive`

Edit this section

Filter tags

Filter tags are interactive labels that represent selected filtering options. Filter tags can be added and removed.

Usage

A filter tag is a tag that is put together with other filter tags inside a filter container. It is NOT part of several tags in a list.

<div class="if …" >
  <button class="if tag" type="button">Orwell</button>
  <button class="if tag" type="button">1984</button>
  <button class="if tag" type="button">Monitor</button>
  <button class="if tag" type="button">Monitors</button></div>

A filter tag can be together with other filter tags, inside a context

Anatomy

Style
  1. The fill color is transparent, the outline color is LB 1, LIGHT BROWN 20%
  2. The text color is LB 1, LIGHT BROWN
  3. The icon fill color is LB 1, LIGHT BROWN
  4. The icon stroke color is BE 5, LIGHTEST BEIGE

Behaviours

Interactions

Hover

A filter tag can be hovered

Style
  1. The text, outline and icon fill color is BL 1, BLUE
Focus

A filter tag can be focused

Style
  1. The color used for the focus ring is CB 3, LIGHT BLUE
Click

A filter tag can be removed.

When the tag is clicked, the class .animation-fade-out is added, it fades out and should be removed from the DOM.

<button class="if tag animation-fade-out" type="button">Orwell</button>
Edit this section

Input tags

Input tags represent keywords in input field. Input tags can be removed.

Usage

Use input tags when multiple input values are expected from user. Input values can be suggested by system.

<div class="if …" >
  <button class="if tag input" type="button">Orwell</button>
  <button class="if tag input" type="button">1984</button>
  <button class="if tag input" type="button">Monitor</button>
  <button class="if tag input" type="button">Monitors</button></div>

A input tag can be together with other input tags, inside a context

Anatomy

Style
  1. The fill color is LB, LIGHT BROWN
  2. The text color is BR 1, BROWN
  3. The icon fill color is BR 1, BROWN
  4. The icon stroke color is BE 5, LIGHTEST BEIGE

Behaviours

Interactions

Hover

A input tag can be hovered

Style
  1. The icon fill color is BR 1, BROWN
  2. The icon stroke color is BE 5, LIGHTEST BEIGE
Focus

A input tag can be focused

Style
  1. The color used for the focus ring is CB 3, LIGHT BLUE
Click

A input tag can be removed.

When the tag is clicked, the class .animation-fade-out is added, it fades out and should be removed from the DOM.

<button class="if tag input animation-fade-out" type="button">Orwell</button>
Edit this section

Status tags

Status tags represent status of item. Status tags use semantic colors to communicate status of item.

Error Success Warning

Usage

A status tag is a tag that is put by itself in another context, for example to label the status of an invoice etc. You should not wrap it in a list, since it is only natural to have one occurence of this tag.

  • Error
  • Success
<ul class="if tags">
  <li class="if">
    <span class="if tag status error">
      Error
    </span>
  </li>
  <li class="if">
    <span class="if tag status error">
      Success
    </span>
  </li>
</ul>

Do not put status tags in a list

Error
<span class="if tag status error">
  Error
</span>
Place a status tag as a standalone element in the context.
Edit this section

Implementation

Implementation example

Here is the default tag implementation code for HTML. Features implementation code is listed next to each feature element.

<button class="if tag" aria-label="Remove Orwell …">
  Orwell
</button>
<button class="if tag input" aria-label="Remove Orwell …">
  Orwell
</button>
<a href="/asds" class="if tag">
  Private
</a>
<ul class="if tags">
  <li class="if">
    <button class="if tag" aria-label="Remove Orwell from the list">
      Orwell
    </button>
  </li></ul>

JavaScript Library

Tag JavaScript library.

This library is compatible with CommonJS, ESM (ES6 module) and UMD. See documentation examples below.

Install

$ npm install @if-design-system/tag-js

Or for Yarn:

$ yarn add @if-design-system/tag-js

API

createTagElement(tag, color)

Creates a tag element and returns a fragment.

Param Type Description
tag String Tag string
color String Any approved color
Edit this section

Contact us