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 be either a string or having the following interface:

interface IconProps = {
  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

Tag

Loading API documentation...

TagButton

Loading API documentation...