Tag

Tags allow users to categorize, label or organize content using keywords.

Basic usage

To create a tag component, you can utilize the properties icon, label, and dismissible.

home

Tag with icon

Tag without icon

Tag with a tag-button

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

dismissible

By default, a tag possesses a 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 is passed as a React element:

Tag with business icon

<Tag
  label="Tag with business icon"
  icon={<Icon icon="applied_settings" lib="business" />}
  dismissible={false}
/>

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.

Default Tag

Rounded Tag

Sharp Tag

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

Sizes

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

train

Small Tag

train

Medium Tag

train

Small Tag

train

Medium Tag

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

Interactive tag

Interactive

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

Tag

Another Tag

Tag without button

<Tag interactive label="Tag" />
<Tag interactive label="Another Tag" />
<Tag interactive dismissible={false} label="Tag without button" />

Selected

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

Tag

Another Tag

Tag without button

<Tag interactive selected label="Tag" />
<Tag interactive selected label="Another Tag" />
<Tag interactive selected dismissible={false} label="Tag without button" />

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

Event handling

The Tag component provides two main event handlers:

onClickedTagEvent

Triggered when the tag itself is clicked. This is useful for interactive tags that should respond to user clicks.

const handleTagClick = () => {
  console.log('Tag was clicked');
  // Your logic here, e.g., selecting the tag
  setSelected(true);
};

<Tag 
  label="Interactive Tag" 
  interactive={true}
  onClickedTagEvent={handleTagClick} 
/>

onClickedTagButtonEvent

Triggered when the close button (x) of a dismissible tag is clicked. This event is commonly used to remove the tag from the UI.

const handleTagDismiss = () => {
  console.log('Tag dismiss button was clicked');
  // Your logic here, e.g., removing the tag
  setTags(tags.filter(tag => tag.id !== tagId));
};

<Tag 
  label="Dismissible Tag" 
  dismissible={true}
  onClickedTagButtonEvent={handleTagDismiss} 
/>

You can use both event handlers together:

<Tag 
  label="Interactive Dismissible Tag"
  interactive={true}
  dismissible={true}
  onClickedTagEvent={handleTagClick}
  onClickedTagButtonEvent={handleTagDismiss}
/>

Note that when the dismiss button is clicked, only the onClickedTagButtonEvent is triggered, not the onClickedTagEvent, as the event propagation is stopped.

Custom Classes

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

Tag with shadow

<Tag classes="shadow-m-light" label="Tag with shadow" />

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