diff --git a/doc/tag/IconDoc.vue b/doc/tag/IconDoc.vue
index 5266dff9e..e9bb37f25 100644
--- a/doc/tag/IconDoc.vue
+++ b/doc/tag/IconDoc.vue
@@ -4,10 +4,12 @@
     </DocSectionText>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag icon="pi pi-user" value="Primary"></Tag>
+        <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
         <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
         <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
         <Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
         <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+        <Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -19,19 +21,23 @@ export default {
             code: {
                 basic: `
 <Tag icon="pi pi-user" value="Primary"></Tag>
+<Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
 <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
 <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
 <Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
 <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+<Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag icon="pi pi-user" value="Primary"></Tag>
+        <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
         <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
         <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
         <Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
         <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+        <Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
     </div>
 </template>
 
@@ -44,9 +50,11 @@ export default {
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag icon="pi pi-user" value="Primary"></Tag>
         <Tag icon="pi pi-check" severity="success" value="Success"></Tag>
+        <Tag icon="pi pi-search" severity="secondary" value="Secondary"></Tag>
         <Tag icon="pi pi-info-circle" severity="info" value="Info"></Tag>
         <Tag icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
         <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
+        <Tag icon="pi pi-cog" severity="contrast" value="Contrast"></Tag>
     </div>
 </template>
 
diff --git a/doc/tag/PillDoc.vue b/doc/tag/PillDoc.vue
index 794ee68f5..572b460be 100644
--- a/doc/tag/PillDoc.vue
+++ b/doc/tag/PillDoc.vue
@@ -4,10 +4,12 @@
     </DocSectionText>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary" rounded></Tag>
+        <Tag severity="secondary" value="Secondary" rounded></Tag>
         <Tag severity="success" value="Success" rounded></Tag>
         <Tag severity="info" value="Info" rounded></Tag>
         <Tag severity="warning" value="Warning" rounded></Tag>
         <Tag severity="danger" value="Danger" rounded></Tag>
+        <Tag severity="contrast" value="Contrast" rounded></Tag>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -19,20 +21,24 @@ export default {
             code: {
                 basic: `
 <Tag value="Primary" rounded></Tag>
+<Tag severity="secondary" value="Secondary" rounded></Tag>
 <Tag severity="success" value="Success" rounded></Tag>
 <Tag severity="info" value="Info" rounded></Tag>
 <Tag severity="warning" value="Warning" rounded></Tag>
 <Tag severity="danger" value="Danger" rounded></Tag>
+<Tag severity="contrast" value="Contrast" rounded></Tag>
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary" rounded></Tag>
+        <Tag severity="secondary" value="Secondary" rounded></Tag>
         <Tag severity="success" value="Success" rounded></Tag>
         <Tag severity="info" value="Info" rounded></Tag>
         <Tag severity="warning" value="Warning" rounded></Tag>
         <Tag severity="danger" value="Danger" rounded></Tag>
-    </div>    
+        <Tag severity="contrast" value="Contrast" rounded></Tag>
+    </div>
 </template>
 
 <script>
@@ -44,10 +50,12 @@ export default {
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Tag value="Primary" rounded></Tag>
         <Tag severity="success" value="Success" rounded></Tag>
+        <Tag severity="secondary" value="Secondary" rounded></Tag>
         <Tag severity="info" value="Info" rounded></Tag>
         <Tag severity="warning" value="Warning" rounded></Tag>
         <Tag severity="danger" value="Danger" rounded></Tag>
-    </div>    
+        <Tag severity="contrast" value="Contrast" rounded></Tag>
+    </div>
 </template>
 
 <script setup>