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

Usage

import { HvTag } from "@hitachivantara/uikit-react-core";

Source

View Source Code

Package

@hitachivantara/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 actions. Use the onClick prop to add an action to the tag.

Click me!

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

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

Deletable tags

You can add a delete button to the tag by using the onDelete prop.

Deletable tag

<HvTag label="Deletable tag" onDelete={() => alert("Deleted!")} />

<HvTag label="Deletable tag" 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";
import { css } from "@emotion/css";


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


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


  return (
    <div
      className={css({
        display: "flex",
        flexDirection: "column",
        gap: theme.space.sm,
      })}
    >
      <div className={css({ display: "flex", gap: theme.space.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>
      <div className={css({ display: "flex" })}>
        <HvTypography variant="label">Selected tags:</HvTypography>&nbsp;
        <HvTypography>{selectedTags.join(", ")}</HvTypography>
      </div>
    </div>
  );
}

import { useState } from "react";
import { css } from "@emotion/css";

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

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

  return (
    <div
      className={css({
        display: "flex",
        flexDirection: "column",
        gap: theme.space.sm,
      })}
    >
      <div className={css({ display: "flex", gap: theme.space.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>
      <div className={css({ display: "flex" })}>
        <HvTypography variant="label">Selected tags:</HvTypography>&nbsp;
        <HvTypography>{selectedTags.join(", ")}</HvTypography>
      </div>
    </div>
  );
}

HvTagsInput

LoadingContainer

Tag

Different colors

Long text

Actions

Deletable tags

Controlled selectable state

Related components