diff --git a/doc/badge/pt/PTDoc.vue b/doc/badge/pt/PTDoc.vue
index 84c6d61d2..ebdb96083 100644
--- a/doc/badge/pt/PTDoc.vue
+++ b/doc/badge/pt/PTDoc.vue
@@ -1,7 +1,21 @@
 <template>
     <DocSectionText v-bind="$attrs"> </DocSectionText>
-    <div class="card flex justify-content-center">
-        <Badge value="2" :pt="{ root: { class: 'bg-primary border-round-sm' } }" />
+    <div class="card flex justify-content-center align-items-center gap-2">
+        <Badge
+            value="2"
+            :pt="{
+                root: 'bg-primary border-round-xl'
+            }"
+        />
+        <i
+            v-badge.danger="{
+                value: '5+',
+                pt: {
+                    root: 'bg-primary'
+                }
+            }"
+            class="pi pi-calendar text-4xl"
+        />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -12,26 +26,69 @@ export default {
         return {
             code: {
                 basic: `
-<Badge value="2"
+// component
+<Badge
+    value="2"
     :pt="{
-        root: { class: 'bg-primary border-round-sm' }
+        root: 'bg-primary border-round-xl'
     }"
+/>
+
+// directive
+<i
+    v-badge.danger="{
+        value: '5+',
+        pt: {
+            root: 'bg-primary'
+        }
+    }"
+    class="pi pi-calendar text-4xl"
 />`,
                 options: `
 <template>
-    <Badge value="2"
-        :pt="{
-            root: { class: 'bg-primary border-round-sm' }
-        }"
-    />
+    <div class="card flex justify-content-center align-items-center gap-2">
+        // component
+        <Badge
+            value="2"
+            :pt="{
+                root: 'bg-primary border-round-xl'
+            }"
+        />
+
+        // directive
+        <i
+            v-badge.danger="{
+                value: '5+',
+                pt: {
+                    root: 'bg-primary'
+                }
+            }"
+            class="pi pi-calendar text-4xl"
+        />
+    </div>
 </template>`,
                 composition: `
 <template>
-    <Badge value="2"
-        :pt="{
-            root: { class: 'bg-primary border-round-sm' }
-        }"
-    />
+    <div class="card flex justify-content-center align-items-center gap-2">
+        // component
+        <Badge
+            value="2"
+            :pt="{
+                root: 'bg-primary border-round-xl'
+            }"
+        />
+
+        // directive
+        <i
+            v-badge.danger="{
+                value: '5+',
+                pt: {
+                    root: 'bg-primary'
+                }
+            }"
+            class="pi pi-calendar text-4xl"
+        />
+    </div>
 </template>`
             }
         };