Porsche Design System

AI Tag

Table of Contents

Within Checkbox
Within Radio Group
Within Input Search
Within Select
Within Tag
Within Text
Within Image
Within Table

Within Checkbox#

The p-ai-tag can be used inline with other form components. In this example, it is placed within the slotted label of a p-checkbox to indicate AI-generated or AI-related content for individual options.

Slotted description with optional link

Banana

Melon

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-fieldset label="Pick your favorite Fruits" label-size="small" class="flex flex-col gap-static-sm">
  <p-text class="-mt-static-md mb-static-sm">
    Slotted description with optional link
  </p-text>
  <div class="flex flex-col gap-static-sm">
    <p-checkbox>
      <span slot="label" class="inline-flex items-center gap-static-sm">
        Banana 
        <p-ai-tag variant="generated"></p-ai-tag>
      </span>
    </p-checkbox>
    <p-checkbox label="Apple"></p-checkbox>
    <p-checkbox checked="true">
      <span slot="label" class="inline-flex items-center gap-static-sm">
        Melon 
        <p-ai-tag variant="abbreviation"></p-ai-tag>
      </span>
    </p-checkbox>
    <p-checkbox label="Grapefruit"></p-checkbox>
  </div>
</p-fieldset>
<script>

</script>
</body>
</html>

Within Radio Group#

The p-ai-tag can also be placed within the slotted label of a p-radio-button-wrapper to indicate AI-related content for individual radio options.

Pick your favorite Fruits

Banana

Melon

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-heading size="small" tag="h3">
  Pick your favorite Fruits
</p-heading>

<p-radio-group label="Some Label" name="fruit" value="banana" class="mt-static-sm">
  <p-radio-group-option value="banana">
    <span slot="label" class="inline-flex items-center gap-static-sm">
      Banana
      <p-ai-tag variant="generated"></p-ai-tag>
    </span>
  </p-radio-group-option>
  <p-radio-group-option value="apple" label="Apple"></p-radio-group-option>
  <p-radio-group-option value="melon">
    <span slot="label" class="inline-flex items-center gap-static-sm">
      Melon
      <p-ai-tag variant="abbreviation"></p-ai-tag>
    </span>
  </p-radio-group-option>
  <p-radio-group-option value="grapefruit" label="Grapefruit"></p-radio-group-option>
</p-radio-group>
<script>

</script>
</body>
</html>

Within Input Search#

The p-ai-tag can be placed in the end slot of a p-input-search to indicate that the search results are AI-powered.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-input-search label="What's your favorite Fruit" description="Search for fruits" name="search">
  <p-ai-tag slot="end" variant="abbreviation"></p-ai-tag>
</p-input-search>
<script>

</script>
</body>
</html>

Within Select#

The p-ai-tag can be placed within p-select-option children inside p-optgroup to indicate AI-related content for individual options in a grouped select.

Pick your favorite Fruits

Option A

Option B

Option C

Option D

Option E

Option F

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-select name="options" description="Some description">
  <span slot="label" class="inline-flex items-center gap-static-sm">
    Pick your favorite Fruits 
    <p-ai-tag variant="abbreviation"></p-ai-tag>
  </span>
  <p-optgroup label="Some optgroup label 1">
    <p-select-option value="a">
      Option A 
      <p-ai-tag variant="generated"></p-ai-tag>
    </p-select-option>
    <p-select-option value="b">
      Option B
    </p-select-option>
    <p-select-option value="c">
      Option C 
      <p-ai-tag variant="abbreviation"></p-ai-tag>
    </p-select-option>
  </p-optgroup>
  <p-optgroup label="Some optgroup label 2">
    <p-select-option value="d">
      Option D
    </p-select-option>
    <p-select-option value="e">
      Option E 
      <p-ai-tag variant="generated"></p-ai-tag>
    </p-select-option>
    <p-select-option value="f">
      Option F
    </p-select-option>
  </p-optgroup>
</p-select>
<script>

</script>
</body>
</html>

Within Tag#

The p-ai-tag can be placed alongside the text content of a p-tag to indicate AI-related context. This works with both compact and default sizes, as well as static and interactive (button-slotted) variants.

Some label

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div class="flex flex-col items-start gap-static-md">
  <p-tag icon="globe">
    Some label 
    <p-ai-tag variant="abbreviation" class="ms-static-xs -me-[5px]"></p-ai-tag>
  </p-tag>
  <p-tag icon="globe">
    <button type="button">
      Some label
    </button>
     
    <p-ai-tag variant="abbreviation" class="ms-static-xs -me-[5px]"></p-ai-tag>
  </p-tag>
  <p-tag icon="globe" compact="true">
    Some label 
    <p-ai-tag variant="abbreviation" class="ms-static-xs -me-[5px]"></p-ai-tag>
  </p-tag>
</div>
<script>

</script>
</body>
</html>

Within Text#

The p-ai-tag can be placed inline within a p-text to indicate that the surrounding text content is AI-related.

This content was generated using artificial intelligence (AI). AI can be a powerful tool for creating content, but it's important to be transparent about its use. By including an AI tag, we can inform users that this content may have been modified or generated by AI, helping to build trust and provide context for the information presented. This is some additional text to show how the AI tag can be used within a text component. The AI tag can be used to indicate that certain content has been modified or generated by AI, providing transparency to users.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-text>
  This content was generated using artificial intelligence (AI). AI can be a powerful tool for creating content, but it's important to be transparent about its use. By including an AI tag, we can inform users that this content may have been modified or generated by AI, helping to build trust and provide context for the information presented.
  <p-ai-tag variant="modified" class="align-bottom"></p-ai-tag>
   This is some additional text to show how the AI tag can be used within a text component. The AI tag can be used to indicate that certain content has been modified or generated by AI, providing transparency to users.
</p-text>
<script>

</script>
</body>
</html>

Within Image#

The p-ai-tag can be positioned as an overlay on images to indicate that the image content has been generated or modified by AI.

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div class="relative inline-block rounded-lg overflow-hidden">
  <img src="assets/ai-tag-image.jpg" alt="AI modified image" class="block w-[300px] h-[300px] object-cover" />
  <p-ai-tag theme="dark" variant="modified" class="absolute bottom-static-sm end-static-sm"></p-ai-tag>
</div>
<script>

</script>
</body>
</html>

Within Table#

The p-ai-tag can sit inline in a p-table-head-cell next to the column title — for example on a Status column when that data is AI-assisted.

Some slotted caption

Model

Date

Purchase Intention

Status

Lead ID

718 Cayman

23.06.2021

New Car

Won

0000824402

Panamera 4S

15.03.2023

Used Car

Lost

0000824408

911 Carrera S

28.08.2025

New Car

Won

0000824409

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div class="w-full">
  <p-table>
    <p-heading slot="caption" size="large" tag="h3">
      Some slotted caption
    </p-heading>
    <p-table-head>
      <p-table-head-row>
        <p-table-head-cell sort="{'id': 'model', 'active': 'true', 'direction': 'desc'}">
          Model
        </p-table-head-cell>
        <p-table-head-cell>
          Date
        </p-table-head-cell>
        <p-table-head-cell>
          Purchase Intention
        </p-table-head-cell>
        <p-table-head-cell>
          <span class="inline-flex items-center gap-static-sm">
            Status
            <p-ai-tag variant="abbreviation"></p-ai-tag>
          </span>
        </p-table-head-cell>
        <p-table-head-cell>
          Lead ID
        </p-table-head-cell>
      </p-table-head-row>
    </p-table-head>
    <p-table-body>
      <p-table-row>
        <p-table-cell>
          718 Cayman
        </p-table-cell>
        <p-table-cell>
          23.06.2021
        </p-table-cell>
        <p-table-cell>
          New Car
        </p-table-cell>
        <p-table-cell>
          Won
        </p-table-cell>
        <p-table-cell>
          0000824402
        </p-table-cell>
      </p-table-row>
      <p-table-row>
        <p-table-cell>
          Panamera 4S
        </p-table-cell>
        <p-table-cell>
          15.03.2023
        </p-table-cell>
        <p-table-cell>
          Used Car
        </p-table-cell>
        <p-table-cell>
          Lost
        </p-table-cell>
        <p-table-cell>
          0000824408
        </p-table-cell>
      </p-table-row>
      <p-table-row>
        <p-table-cell>
          911 Carrera S
        </p-table-cell>
        <p-table-cell>
          28.08.2025
        </p-table-cell>
        <p-table-cell>
          New Car
        </p-table-cell>
        <p-table-cell>
          Won
        </p-table-cell>
        <p-table-cell>
          0000824409
        </p-table-cell>
      </p-table-row>
    </p-table-body>
  </p-table>
</div>
<script>

</script>
</body>
</html>