Porsche Design System

Tag

Table of Contents

With slotted button
With slotted link
Multiline

With slotted button#

It is possible to add a <button> tag into the p-tag component. If you do this, the entire component becomes clickable and no other content outside the button or link is allowed.

Open in Stackblitz

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

<div class="flex flex-wrap gap-static-md">
  <p-tag icon="car" variant="primary">
    <button type="button">
      Variant primary
    </button>
  </p-tag>
  <p-tag variant="secondary">
    <button type="button">
      Variant secondary
    </button>
  </p-tag>
  <p-tag variant="info">
    <button type="button">
      Variant info
    </button>
  </p-tag>
  <p-tag variant="warning">
    <button type="button">
      Variant warning
    </button>
  </p-tag>
  <p-tag variant="success">
    <button type="button">
      Variant success
    </button>
  </p-tag>
  <p-tag variant="error">
    <button type="button">
      Variant error
    </button>
  </p-tag>
</div>
<script>

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

With slotted link#

It is possible to add an <a> tag to the p-tag component. If you do this, the entire component becomes clickable and no other content outside the button or link is allowed.

Open in Stackblitz

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

<div class="flex flex-wrap gap-static-md">
  <p-tag icon="car" variant="primary">
    <a href="https://porsche.com">
      Variant primary
    </a>
  </p-tag>
  <p-tag variant="secondary">
    <a href="https://porsche.com">
      Variant secondary
    </a>
  </p-tag>
  <p-tag variant="info">
    <a href="https://porsche.com">
      Variant info
    </a>
  </p-tag>
  <p-tag variant="warning">
    <a href="https://porsche.com">
      Variant warning
    </a>
  </p-tag>
  <p-tag variant="success">
    <a href="https://porsche.com">
      Variant success
    </a>
  </p-tag>
  <p-tag variant="error">
    <a href="https://porsche.com">
      Variant error
    </a>
  </p-tag>
</div>
<script>

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

Multiline#

The contents of the p-tag component are rendered with white-space: nowrap by default. If multiline rendering is needed (e.g. due to limited space), the default behavior can be overridden with external CSS.

Some label with longer text wrapped in a narrow container

Open in Stackblitz

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

<div class="w-[100px]">
  <p-tag variant="success" class="whitespace-normal">
    Some label with longer text wrapped in a narrow container
  </p-tag>
</div>
<script>

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