Tag

To add the Tag component to your app:

1
2
import { Tag } from "@forge/react";

Description

A tag labels UI objects for quick recognition and navigation.

Props

Examples

Appearance

Default

The default form of a tag, where text is required. Tags with static text can be used as a flag or as a reference to an object or attribute.

1
2
const TagDefaultExample = () => {
  return (
    <Tag text="Tag" />
  );
};

Rounded

Rounded tags with an avatar are used to add or remove people in multi-select controls.

1
2
const TagRoundExample = () => {
  return (
   <Tag
      appearance="rounded"
      text="Rounded tag"
    />
  );
};

Color

The color theme for background and text.

1
2
const TagColorExample = () => {
  return (
    <TagGroup>
      <Tag text="standard Tag" color="standard" />
      <Tag text="blue Tag" color="blue" />
      <Tag text="green Tag" color="green" />
      <Tag text="teal Tag" color="teal" />
      <Tag text="purple Tag" color="purple" />
      <Tag text="red Tag" color="red" />
      <Tag text="yellow Tag" color="yellow" />
      <Tag text="orange Tag" color="orange" />
      <Tag text="magenta Tag" color="magenta" />
      <Tag text="lime Tag" color="lime" />
      <Tag text="grey Tag" color="grey" />
      <Tag text="greenLight Tag" color="greenLight" />
      <Tag text="tealLight Tag" color="tealLight" />
      <Tag text="blueLight Tag" color="blueLight" />
      <Tag text="purpleLight Tag" color="purpleLight" />
      <Tag text="redLight Tag" color="redLight" />
      <Tag text="yellowLight Tag" color="yellowLight" />
      <Tag text="orangeLight Tag" color="orangeLight" />
      <Tag text="magentaLight Tag" color="magentaLight" />
      <Tag text="limeLight Tag" color="limeLight" />
      <Tag text="greyLight Tag" color="greyLight" />
    </TagGroup>
  );
};

Tag link

A tag with an href can link to more information on the tagged item.

1
2
const TagLinkExample = () => {
  return (
    <Tag
      href="https://www.atlassian.com"
      text="Tag link"
    />
  );
};

Text max length

The maximum width for a tag is 200px. If the text within the tag exceeds this width, it will be truncated and an ellipsis (...) will be added to indicate there is more text.

1
2
const TagTextMaxLengthExample = () => {
  return (
    <Tag
      appearance="default"
      text="Croissant tiramisu gummies"
    />
  );
};