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

`Name`	`Type`	Required	Description
`text`	`string`	Yes	Text to be displayed in the tag.
`appearance`	`"default" \| "rounded"`	No	Set whether tags should be rounded.
`color`	`"standard" \| "green" \| "lime" \| "blue" \| "red" \| "purple" \| "magenta" \| "grey" \| "teal" \|"orange" \| "yellow" \| "limeLight" \| "orangeLight" \| "magentaLight" \| "greenLight" \| "blueLight" \| "redLight" \| "purpleLight" \| "greyLight" \| "tealLight" \| "yellowLight"`	No	The color theme to apply, setting both background and text color. Default is `standard`.
`elemBefore`	`Component`	No	Component to be rendered before the tag.

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.

Example image of a tag

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.

Example image of a rounded tag

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

Color

The color theme for background and text.

Example image of colored tags

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>
  );
};

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.

Example image of a tag

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