Tag

A Tag is one word that describes a specific aspect of an asset. A single asset can have multiple tags. Use tags to highlight an item's status for quick recognition and navigation Use color to indicate meanings that users can learn and recognize across products It leverages the Chip component from Material UI

Source Code

uikit-react-core

Tag label

label

color

disabled

selectable

<HvTag label="Tag label" color="neutral_20" />

<HvTag label="Tag label" color="neutral_20" />

Different colors

You can change the default color of the tag by passing a color name from the UI Kit color palette, a CSS color name or a hex color code.

Tag Label

<>
  <HvTag label="Tag Label" color="positive" />
  <HvTag label="Tag Label" color="cat2" />
  <HvTag label="Tag Label" color="aquamarine" />
  <HvTag label="Tag Label" color="#c73aa8" />
</>

<>
  <HvTag label="Tag Label" color="positive" />
  <HvTag label="Tag Label" color="cat2" />
  <HvTag label="Tag Label" color="aquamarine" />
  <HvTag label="Tag Label" color="#c73aa8" />
</>

Long text

The tag component will automatically truncate the text if it is too long to fit in the container. You can add a tooltip to show the full text when the user hovers over the tag.

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.

Click me!

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

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

Controlled selectable state

To use the selectable tags in a controlled way, set the selected prop to true of false.

Asset 1

Asset 2

Asset 3

Asset 4

Selected tags:

Asset 1, Asset 3

import { useState } from "react";


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


export default function Demo() {
  const [selectedTags, setSelectedTags] = useState(["Asset 1", "Asset 3"]);


  return (
    <div className="grid gap-sm">
      <div className="flex gap-sm">
        {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>
      <br />
      <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(["Asset 1", "Asset 3"]);

  return (
    <div className="grid gap-sm">
      <div className="flex gap-sm">
        {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>
      <br />
      <div className="flex items-center gap-xs">
        <HvTypography variant="label">Selected tags:</HvTypography>
        <div>{selectedTags.join(", ")}</div>
      </div>
    </div>
  );
}

HvTagsInput

Section TextArea

Tag

Different colors

Long text

Actions

Controlled selectable state

Related components