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

qtm-tag

Property	Type	Default	Description
classes	string		list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
color	"bluegrey" | "green" | "lightblue" | "orange" | "primary" | "purple" | "red" | "yellow"	'primary'	The color of the component.
disabled	boolean	false	If true, the component is disabled.
dismissible	boolean	true	If false, the tag does not automatically have a tag button
icon	string | { icon: string; classes?: string; lib?: IconLibType; size?: IconSizeType; variant?: IconVariantType; }		The name of the icon in the left side of a tag. Besides, its value can have type IconType if this icon is customized
interactive	boolean	false	if true, the tag will appear interactive, and will raise when pressed or hovered
label	string		The text in a tag
selected	boolean	false	If true, the tag is selected.
shape	"rounded" | "sharp"	'rounded'	border radius of element.
size	"medium" | "small"	'medium'	The size of element.

Event	Type	Description
clickedTagButtonEvent	CustomEvent<void>	Callback fired when a tag-button of the tag component is clicked
clickedTagEvent	CustomEvent<void>	Callback fired when the tag is clicked