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.
prev
next
Open in Stackblitz
<!doctype html>
<htmllang="en"class="auto"><head><title></title></head><bodyclass="bg-base"><divclass="flex flex-wrap gap-static-md"><p-tagicon="car"color="background-base"><buttontype="button"> Color background-base
</button></p-tag><p-tagcolor="background-surface"><buttontype="button"> Color background-surface
</button></p-tag><p-tagcolor="background-default"><buttontype="button"> Color background-default
</button></p-tag><p-tagcolor="background-frosted"><buttontype="button"> Color background-frosted
</button></p-tag><p-tagcolor="primary"><buttontype="button"> Color primary
</button></p-tag><p-tagcolor="notification-info-soft"><buttontype="button"> Color notification-info-soft
</button></p-tag><p-tagcolor="notification-warning-soft"><buttontype="button"> Color notification-warning-soft
</button></p-tag><p-tagcolor="notification-success-soft"><buttontype="button"> Color notification-success-soft
</button></p-tag><p-tagcolor="notification-error-soft"><buttontype="button"> Color notification-error-soft
</button></p-tag></div><script></script></body></html>
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.
<!doctype html>
<htmllang="en"class="auto"><head><title></title></head><bodyclass="bg-base"><divclass="flex flex-wrap gap-static-md"><p-tagicon="car"color="background-base"><ahref="https://porsche.com"> Color background-base
</a></p-tag><p-tagcolor="background-surface"><ahref="https://porsche.com"> Color background-surface
</a></p-tag><p-tagcolor="background-default"><ahref="https://porsche.com"> Color background-default
</a></p-tag><p-tagcolor="background-frosted"><ahref="https://porsche.com"> Color background-frosted
</a></p-tag><p-tagcolor="primary"><ahref="https://porsche.com"> Color primary
</a></p-tag><p-tagcolor="notification-info-soft"><ahref="https://porsche.com"> Color notification-info-soft
</a></p-tag><p-tagcolor="notification-warning-soft"><ahref="https://porsche.com"> Color notification-warning-soft
</a></p-tag><p-tagcolor="notification-success-soft"><ahref="https://porsche.com"> Color notification-success-soft
</a></p-tag><p-tagcolor="notification-error-soft"><ahref="https://porsche.com"> Color notification-error-soft
</a></p-tag></div><script></script></body></html>
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
prev
next
Open in Stackblitz
<!doctype html>
<htmllang="en"class="auto"><head><title></title></head><bodyclass="bg-base"><divclass="w-[100px]"><p-tagcolor="notification-success-soft"class="whitespace-normal"> Some label with longer text wrapped in a narrow container
</p-tag></div><script></script></body></html>
