Tag

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

There are two methods available for creating tag components: utilizing content properties or employing slot projection.

Content properties

To include an icon, label, and a tag button within a tag, you can utilize the properties icon, label, and dismissible.

<qtm-tag label="Tag with icon" icon="home" dismissible="false"></qtm-tag>
<qtm-tag label="Tag without icon" dismissible="false"></qtm-tag>
<qtm-tag label="Tag with a tag-button" dismissible="true"></qtm-tag>

dismissible

By default, a tag possesses a qtm-tag-button that alters its appearance upon hovering. To have a tag without a tag button, simply set dismissible=false.

icon

To select an appropriate icon, please consult the Icon component documentation.

The icon can either be of string type or have one of the following type:

type IconType = {
  icon: string,
  classes?: string,
  lib?: IconLibType,
  size?: IconSizeType,
  variant?: IconVariantType,
};

cosnt icon= {icon: 'applied_settings', lib:"business"};
document.querySelector("qtm-tag").icon = icon;

<qtm-tag label="Tag with business icon" dismissible="false"></qtm-tag>

Slot projection

Alternatively, you can use slot projection to incorporate tag buttons, icons, and typography within a tag component. This approach provides you with greater control over the tag's layout and content.

TagTagTag with iconTag with icon

<qtm-tag dismissible="false">Tag</qtm-tag>
<qtm-tag dismissible="false">
  <qtm-icon icon="train"></qtm-icon>
  <qtm-typography>Tag</qtm-typography>
</qtm-tag>
<qtm-tag dismissible="false">
  <qtm-icon icon="train"></qtm-icon>
  <qtm-typography>Tag with icon</qtm-typography>
</qtm-tag>
<qtm-tag dismissible="false">
  <qtm-icon icon="train"></qtm-icon>
  <qtm-typography>Tag with icon</qtm-typography>
  <qtm-tag-button>
    <qtm-icon icon="close"></qtm-icon>
  </qtm-tag-button>
</qtm-tag>

Shape

There are two border tag styles, the default shape is rounded. You can set shape attribute to rounded to make a rounded tag or to sharp to make sharp tag.

<qtm-tag label="Default Tag"></qtm-tag>
<qtm-tag label="Rounded Tag" shape="rounded"></qtm-tag>
<qtm-tag shape="sharp" label="Sharp Tag"></qtm-tag>

Sizes

The tag comes in 2 different sizes: small, medium. By default the size attribute has medium value.

<qtm-tag size="small" icon="train" label="Small Tag"></qtm-tag>
<qtm-tag size="medium" icon="train" label="Medium Tag"></qtm-tag>
<qtm-tag shape="sharp" size="small" icon="train" label="Small Tag"></qtm-tag>
<qtm-tag shape="sharp" size="medium" icon="train" label="Medium Tag"></qtm-tag>

Interactive tag

Interactive

With interactive attribute, the tags change appearance on press, hover, and click.

TagTag

<qtm-tag interactive label="Tag"></qtm-tag>
<qtm-tag interactive>
  <qtm-typography>Tag</qtm-typography>
</qtm-tag>
<qtm-tag interactive dismissible="false">
  <qtm-typography>Tag</qtm-typography>
  <qtm-tag-button>
    <QtmIcon icon="close"></QtmIcon>
  </qtm-tag-button>
</qtm-tag>

Selected

You can style a selected tag by adding selected attribute to this element.

TagTag

<qtm-tag interactive selected label="Tag"></qtm-tag>
<qtm-tag interactive selected>
  <qtm-typography>Tag</qtm-typography>
</qtm-tag>
<qtm-tag interactive selected dismissible="false">
  <qtm-typography>Tag</qtm-typography>
  <qtm-tag-button>
    <QtmIcon icon="close"></QtmIcon>
  </qtm-tag-button>
</qtm-tag>

Colors

Tags are available in 8 colors: primary, lightblue, green, orange, red, yellow, bluegrey, and purple. The default color is the primary color: color="primary".

Primary

Light blue

Green

Orange

Red

Yellow

Bluegrey

Purple

<!-- Primary -->
<qtm-tag interactive color="purple" label="Tag"></qtm-tag>
<qtm-tag interactive color="purple" selected label="Selected Tag"></qtm-tag>
<qtm-tag interactive color="purple" disabled label="Disabled Tag"></qtm-tag>

API

Loading API documentation...