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 children projection.

Content properties

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

<QtmTag label="Tag with icon" icon="home" dismissible={false}></QtmTag>
<QtmTag label="Tag without icon" dismissible={false}></QtmTag>
<QtmTag label="Tag with a tag-button" dismissible></QtmTag>

dismissible

By default, a tag possesses a QtmTagButton 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,
};
<QtmTag
label="Tag with business icon"
icon={{ icon: 'applied_settings', lib: 'business' }}
dismissible="false"
></QtmTag>

Children projection

Alternatively, you can use children 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
<QtmTag dismissible={false}>Tag</QtmTag>
<QtmTag dismissible={false}>
<QtmIcon icon="train"></QtmIcon>
<QtmTypography>Tag</QtmTypography>
</QtmTag>
<QtmTag dismissible={false}>
<QtmIcon icon="train"></QtmIcon>
<QtmTypography>Tag with icon</QtmTypography>
</QtmTag>
<QtmTag dismissible={false}>
<QtmIcon icon="train"></QtmIcon>
<QtmTypography>Tag with icon</QtmTypography>
<QtmTagButton>
<QtmIcon icon="close"></QtmIcon>
</QtmTagButton>
</QtmTag>

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.

<QtmTag label="Default Tag"></QtmTag>
<QtmTag label="Rounded Tag" shape="rounded"></QtmTag>
<QtmTag shape="sharp" label="Sharp Tag"></QtmTag>

Sizes

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

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

Interactive tag

Interactive

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

TagTag
<QtmTag interactive label="Tag"></QtmTag>
<QtmTag interactive>
<QtmTypography>Tag</QtmTypography>
</QtmTag>
<QtmTag interactive dismissible="false">
<QtmTypography>Tag</QtmTypography>
<QtmTagButton>
<QtmIcon icon="close"></QtmIcon>
</QtmTagButton>
</QtmTag>

Selected

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

TagTag
<QtmTag interactive selected label="Tag"></QtmTag>
<QtmTag interactive selected>
<QtmTypography>Tag</QtmTypography>
</QtmTag>
<QtmTag interactive selected dismissible="false">
<QtmTypography>Tag</QtmTypography>
<QtmTagButton>
<QtmIcon icon="close"></QtmIcon>
</QtmTagButton>
</QtmTag>

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 -->
<QtmTag interactive color="primary" label="Tag"></QtmTag>
<QtmTag interactive color="primary" selected label="Selected Tag"></QtmTag>
<QtmTag interactive color="primary" disabled label="Disabled Tag"></QtmTag>

API

QtmTag

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
onClickedTagButtonEventCustomEvent<void>Callback fired when a tag-button of the tag component is clicked
onClickedTagEventCustomEvent<void>Callback fired when the tag is clicked