`Name`	`Type`	Required	Description
`text`	`string`	Yes	Text to be displayed in the tag.
`href`	`string`	No	URI or path. If provided, the tag will be a link.
`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.
`isRemovable`	`boolean`	No	Flag to indicate if a tag is removable.
`removeButtonLabel`	`string`	No	Text rendered as the aria-label for remove button.
`onAfterRemoveAction`	`(text: string) => void`	No	Handler to be called after tag is removed.
`onBeforeRemoveAction`	`() => boolean`	No	Handler to be called before the tag is removed. If it does not return a truthy value, the tag will not be removed.

Examples

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
3
4
5
6
const TagDefaultExample = () => {
  return (
    <Tag text="Tag" />
  );
};

Tag link

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

Example image of a tag link

1
2
3
4
5
6
7
8
9
const TagLinkExample = () => {
  return (
    <Tag
      href="https://www.atlassian.com"
      text="Tag link"
    />
  );
};

Removable

Once a tag has been removed, it cannot be re-rendered. Removable tags are visible in "edit" mode or in multi-select controls.

Example image of a removable tag

1
2
3
4
5
6
7
8
9
10
const TagRemovableExample = () => {
  return (
    <Tag 
      text="Removable tag" 
      isRemovable
      removeButtonLabel="Remove" 
    />
  );
};

Color

The color theme for background and text.

Example image of colored tags

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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" />
    </TagGroup>
  );
};

Element before

The component to be rendered before the tag.

Example image of tag with element before

1
2
3
4
5
6
7
8
9
const TagTextElemBeforeExample = () => {
  return (
    <Tag
      text="Element before tag"
      elemBefore={<Icon glyph="hashtag">}
    />
  );
};

Text max length

The maximum width for a tag is 180px. 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
3
4
5
6
7
8
const TagTextMaxLengthExample = () => {
  return (
    <Tag
      text="Croissant tiramisu gummi bears"
    />
  );
};