Tag

CTag component is used to categorize content.

Basic

Label of the tag is defined with the value property.

New

<template>
  <div class="card flex justify-center">
    <CTag value="New"></CTag>
  </div>
</template>

Severity

Severity defines the variant of a tag.

TIP

primary is the default severity, it will be applied if no severity is specified.

PrimarySecondaryTertiaryNeutralSuccessInfoWarnDangerContrast

<template>
    <div class="card flex flex-wrap justify-center gap-2">
        <CTag value="Primary"></CTag>
        <CTag severity="secondary" value="Secondary"></CTag>
        <CTag severity="tertiary" value="Tertiary"></CTag>
        <CTag severity="neutral" value="Neutral"></CTag>
        <CTag severity="success" value="Success"></CTag>
        <CTag severity="info" value="Info"></CTag>
        <CTag severity="warn" value="Warn"></CTag>
        <CTag severity="danger" value="Danger"></CTag>
        <CTag severity="contrast" value="Contrast"></CTag>
    </div>
</template>

Pill

Enabling rounded, displays a tag as a pill.

PrimarySecondaryTertiaryNeutralSuccessInfoWarnDangerContrast

<template>
    <div class="card flex flex-wrap justify-center gap-2">
        <CTag value="Primary" rounded></CTag>
        <CTag severity="secondary" value="Secondary" rounded></CTag>
        <CTag severity="tertiary" value="Tertiary" rounded></CTag>
        <CTag severity="neutral" value="Neutral" rounded></CTag>
        <CTag severity="success" value="Success" rounded></CTag>
        <CTag severity="info" value="Info" rounded></CTag>
        <CTag severity="warn" value="Warn" rounded></CTag>
        <CTag severity="danger" value="Danger" rounded></CTag>
        <CTag severity="contrast" value="Contrast" rounded></CTag>
    </div>
</template>

Icon

A font icon next to the value can be displayed with the icon property.

PrimarySecondarySuccessInfoWarnDangerContrast

<div class="card flex flex-wrap justify-center gap-2">
    <CTag icon="pi pi-user" value="Primary"></CTag>
    <CTag icon="pi pi-search" severity="secondary" value="Secondary"></CTag>
    <CTag icon="pi pi-check" severity="success" value="Success"></CTag>
    <CTag icon="pi pi-info-circle" severity="info" value="Info"></CTag>
    <CTag icon="pi pi-exclamation-triangle" severity="warn" value="Warn"></CTag>
    <CTag icon="pi pi-times" severity="danger" value="Danger"></CTag>
    <CTag icon="pi pi-cog" severity="contrast" value="Contrast"></CTag>
</div>