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

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