Skip to main content
🏠ComponentsTagVersion: 2.0.0-beta.6

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 content 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"}
<qtm-tag label="Tag with business icon" [icon]="icon" dismissible="false"></qtm-tag>

Content projection

Alternatively, you can employ content 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

PropertyTypeDefaultDescription
classesstringlist 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.
disabledbooleanfalseIf true, the component is disabled.
dismissiblebooleantrueIf false, the tag does not automatically have a tag button
iconstring | { 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
interactivebooleanfalseif true, the tag will appear interactive, and will raise when pressed or hovered
labelstringThe text in a tag
selectedbooleanfalseIf true, the tag is selected.
shape"rounded" | "sharp"'rounded'border radius of element.
size"medium" | "small"'medium'The size of element.
EventTypeDescription
clickedTagButtonEventCustomEvent<void>Callback fired when a tag-button of the tag component is clicked
clickedTagEventCustomEvent<void>Callback fired when the tag is clicked