Tag

A Tag is a single word that highlights a specific aspect of an asset. An asset can have multiple tags.

Use tags to indicate status, aid recognition, and support navigation—leveraging color to convey consistent meaning across products.

Source Code

uikit-react-core

Colors

Customize the tag’s color using the color prop.

<div className="flex gap-xs">
  <HvTag selectable label="Tag" />
  <HvTag selectable label="Semantic tag" color="positive" />
  <HvTag selectable label="Semantic tag" color="warning" />
  <HvTag selectable label="Semantic tag" color="negative" />
  <HvTag selectable label="Custom tag" color="pink" />
  <HvTag selectable label="Custom tag" color="#c73aa8" />
</div>

<div className="flex gap-xs">
  <HvTag selectable label="Tag" />
  <HvTag selectable label="Semantic tag" color="positive" />
  <HvTag selectable label="Semantic tag" color="warning" />
  <HvTag selectable label="Semantic tag" color="negative" />
  <HvTag selectable label="Custom tag" color="pink" />
  <HvTag selectable label="Custom tag" color="#c73aa8" />
</div>

Sizes

Change the tag’s size using the size prop.

<div className="flex gap-xs">
  <HvTag selectable label="Tag label" size="xs" />
  <HvTag selectable label="Tag label" size="sm" />
  <HvTag selectable label="Tag label" size="md" />
</div>

<div className="flex gap-xs">
  <HvTag selectable label="Tag label" size="xs" />
  <HvTag selectable label="Tag label" size="sm" />
  <HvTag selectable label="Tag label" size="md" />
</div>

Icons

Add an icon using the icon prop. To show a built-in checkbox icon, use the showSelectIcon prop.

<div className="flex gap-xs">
  <HvTag
    icon={<Abacus size="xs" className="size-12px" />}
    label="Tag with icon"
    size="sm"
    selectable
    showSelectIcon={false}
  />
  <HvTag selectable showSelectIcon label="Tag with checkbox" size="sm" />
</div>

<div className="flex gap-xs">
  <HvTag
    icon={<Abacus size="xs" className="size-12px" />}
    label="Tag with icon"
    size="sm"
    selectable
    showSelectIcon={false}
  />
  <HvTag selectable showSelectIcon label="Tag with checkbox" size="sm" />
</div>

Long text

The Tag component automatically truncates text that overflows.
To display the full text on hover, add a tooltip.

This is an example of a extremely long tag

<HvTag
  label={
    <HvOverflowTooltip data="This is an example of a extremely long tag" />
  }
/>

<HvTag
  label={
    <HvOverflowTooltip data="This is an example of a extremely long tag" />
  }
/>

Actions

Tags can have click actions.

Use the onClick prop to add an action to the tag.
Use the onDelete prop to add a delete button to the tag.

<HvTag
  label="Click me!"
  onClick={() => alert("Clicked!")}
  onDelete={() => alert("Deleted!")}
/>

<HvTag
  label="Click me!"
  onClick={() => alert("Clicked!")}
  onDelete={() => alert("Deleted!")}
/>

Controlled selection

The tag selection state can be controlled using the selected prop.

Selected tags:

Asset 1, Asset 2

import { useState } from "react";


const tags = ["Asset 1", "Asset 2", "Asset 3", "Asset 4"];


export default function Demo() {
  const [selectedTags, setSelectedTags] = useState(tags.slice(0, 2));


  return (
    <div className="grid gap-sm">
      <div className="flex gap-xs">
        {tags.map((tag, i) => (
          <HvTag
            key={`${tag}-${i}`}
            label={tag}
            selectable
            selected={selectedTags.includes(tag)}
            onClick={(event, selected) => {
              setSelectedTags((prev) =>
                selected
                  ? prev.concat(tag)
                  : prev.filter((item) => item !== tag),
              );
            }}
          />
        ))}
      </div>
      <div className="flex items-center gap-xs">
        <HvTypography variant="label">Selected tags:</HvTypography>
        <div>{selectedTags.join(", ")}</div>
      </div>
    </div>
  );
}

import { useState } from "react";

const tags = ["Asset 1", "Asset 2", "Asset 3", "Asset 4"];

export default function Demo() {
  const [selectedTags, setSelectedTags] = useState(tags.slice(0, 2));

  return (
    <div className="grid gap-sm">
      <div className="flex gap-xs">
        {tags.map((tag, i) => (
          <HvTag
            key={`${tag}-${i}`}
            label={tag}
            selectable
            selected={selectedTags.includes(tag)}
            onClick={(event, selected) => {
              setSelectedTags((prev) =>
                selected
                  ? prev.concat(tag)
                  : prev.filter((item) => item !== tag),
              );
            }}
          />
        ))}
      </div>
      <div className="flex items-center gap-xs">
        <HvTypography variant="label">Selected tags:</HvTypography>
        <div>{selectedTags.join(", ")}</div>
      </div>
    </div>
  );
}

HvTagsInput

Tag