Tag group

To add the TagGroup component to your app:

1
2
import { TagGroup } from '@forge/react';

Description

A tag group controls the layout and alignment for a collection of tags.

Props

Examples

Default

By default, a tag group lays out a collection of tags from left to right, handling overflow by wrapping to the next line.

In most cases, all of the tags inside of a tag group should be of the same type to provide a consistent user experience.

1
2
const TagGroupDefaultExample = () => {
  return (
    <TagGroup>
      <Tag text="Bitbucket" />
      <Tag text="Compass" />
      <Tag text="Confluence" />
      <Tag text="Jira" />
      <Tag text="Jira Service Management" />
      <Tag text="Jira Software" />
      <Tag text="Jira Work Management" />
      <Tag text="Opsgenie" />
      <Tag text="Statuspage" />
      <Tag text="Trello" />
    </TagGroup>
  );
};

Alignment

The alignment direction can be set to either the start or end of the tag group container using the alignment prop.

Start

Set the alignment prop to start to align the tags to the start of the tag group container.

1
2
const TagGroupStartAlignmentExample = () => {
  return (
    <TagGroup alignment="start">
      <Tag text="Bitbucket" />
      <Tag text="Compass" />
      <Tag text="Confluence" />
      <Tag text="Jira" />
      <Tag text="Jira Service Management" />
      <Tag text="Jira Software" />
      <Tag text="Jira Work Management" />
      <Tag text="Opsgenie" />
      <Tag text="Statuspage" />
      <Tag text="Trello" />
    </TagGroup>
  );
};

End

Set thealignment prop to end to align the tags to the end of the group.

1
2
const TagGroupEndAlignmentExample = () => {
  return (
    <TagGroup alignment="end">
      <Tag text="Bitbucket" />
      <Tag text="Compass" />
      <Tag text="Confluence" />
      <Tag text="Jira" />
      <Tag text="Jira Service Management" />
      <Tag text="Jira Software" />
      <Tag text="Jira Work Management" />
      <Tag text="Opsgenie" />
      <Tag text="Statuspage" />
      <Tag text="Trello" />
    </TagGroup>
  );
};