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="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div class="flex flex-wrap gap-static-md">
  <p-tag variant="primary">
    <button type="button">
      Variant primary
    </button>
  </p-tag>
  <p-tag icon="car" 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 <a> 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="auto">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div class="flex flex-wrap gap-static-md">
  <p-tag variant="primary">
    <a href="https://porsche.com">
      Variant primary
    </a>
  </p-tag>
  <p-tag icon="car" 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 less amount of space), the default behaviour can be overwritten with CSS from outside.

Some label with longer text wrapped in a narrow container

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<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>