Tag

const Preview = () => {
  return <Tag>New</Tag>;
};

render(<Preview />)

Use Tag when

• content needs a category, for example “Beta”, “New”, or “Popular”
• a status should be shown, for example “Ongoing”, “Completed”, or “Cancelled”

Avoid using Tag when

• linking to another page, use Link instead
• the element triggers an action, use Button instead
• the user needs to filter content, use Chip instead

Example

Icons

Icons can be used inside a Tag to add additional visual information. You need to set the spacing between text and icon yourself. We recommend keeping the Tag padding equal to the icon’s margin.

const IconsEn = () => {
  return (
    <Tag
      data-color='neutral'
      data-size='md'
      style={{
        paddingInlineStart: 'var(--ds-size-1)',
      }}
    >
      <RobotIcon aria-hidden style={{ marginInlineEnd: 'var(--ds-size-1)' }} />
      This text is AI-generated
    </Tag>
  );
};

render(<IconsEn />)

Variants

Tag comes in two variants, with and without an outline. A tag may appear weak on certain background colours, and changing the variant can make it more visible.

const Variants = () => {
  const colors = [
    'accent',
    'brand1',
    'brand2',
    'brand3',
    'neutral',
    'success',
    'warning',
    'danger',
    'info',
  ] as TagProps['data-color'][];
  return (
    <>
      <div
        style={{
          display: 'flex',
          gap: 'var(--ds-size-2)',
          flexWrap: 'wrap',
        }}
      >
        <Paragraph>Default:</Paragraph>
        {colors.map((color) => (
          <Tag
            key={color}
            data-color={color as TagProps['data-color']}
            variant='default'
          >
            {color}
          </Tag>
        ))}
      </div>
      <br />
      <div
        style={{
          display: 'flex',
          gap: 'var(--ds-size-2)',
          flexWrap: 'wrap',
        }}
      >
        <Paragraph>Outline:</Paragraph>
        {colors.map((color) => (
          <Tag
            key={color}
            data-color={color as TagProps['data-color']}
            variant='outline'
          >
            {color}
          </Tag>
        ))}
      </div>
    </>
  );
};

render(<Variants />)

Guidelines

Use Tag to help users quickly identify content based on category, status, or characteristics. Tag works well for presenting metadata, such as document type, status, or topic. They should be used consistently, kept short and easy to understand, and avoided when the information is already clear from context. A tag is not clickable, it is purely a label.

Placement

Tag should generally be placed after the title or name of the related element. Avoid placing tags next to buttons, as this can confuse users. Consider the placement carefully and user-test when needed.

Text

• Use short labels for easy scanning. Preferably one word, with a maximum of two if necessary to distinguish between tag types.
• Use terms that are familiar within the context of the solution; avoid unfamiliar or unclear wording.
• When using multiple tags together, place them in a <ul> with <li> elements so screen readers announce them as a list.