diff --git a/components/doc/codeeditor/templates.js b/components/doc/codeeditor/templates.js
index 621bd14f3..d5be51108 100644
--- a/components/doc/codeeditor/templates.js
+++ b/components/doc/codeeditor/templates.js
@@ -168,6 +168,7 @@ import MeterGroup from 'primevue/metergroup';
 import MultiSelect from 'primevue/multiselect';
 import OrderList from 'primevue/orderlist';
 import OrganizationChart from 'primevue/organizationchart';
+import OverlayBadge from 'primevue/overlaybadge';
 import OverlayPanel from 'primevue/overlaypanel';
 import Paginator from 'primevue/paginator';
 import Panel from 'primevue/panel';
@@ -291,6 +292,7 @@ app.component('MeterGroup', MeterGroup);
 app.component('MultiSelect', MultiSelect);
 app.component('OrderList', OrderList);
 app.component('OrganizationChart', OrganizationChart);
+app.component('OverlayBadge', OverlayBadge);
 app.component('OverlayPanel', OverlayPanel);
 app.component('Paginator', Paginator);
 app.component('Panel', Panel);
diff --git a/doc/avatar/IconDoc.vue b/doc/avatar/IconDoc.vue
index f10ae2309..9b2a72236 100644
--- a/doc/avatar/IconDoc.vue
+++ b/doc/avatar/IconDoc.vue
@@ -20,7 +20,9 @@
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
             </div>
         </div>
     </div>
@@ -41,7 +43,9 @@ export default {
 <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
 <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
 
-<Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+<OverlayBadge value="4" severity="danger" class="inline-flex">
+    <Avatar icon="pi pi-user" size="xlarge" />
+</OverlayBadge>
 `,
                 options: `
 <template>
@@ -63,7 +67,9 @@ export default {
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
             </div>
         </div>
     </div>
@@ -93,7 +99,9 @@ export default {
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar icon="pi pi-user" size="xlarge" />
+                </OverlayBadge>
             </div>
         </div>
     </div>
diff --git a/doc/avatar/ImageDoc.vue b/doc/avatar/ImageDoc.vue
index b8469f4a5..0fd189127 100644
--- a/doc/avatar/ImageDoc.vue
+++ b/doc/avatar/ImageDoc.vue
@@ -13,7 +13,9 @@
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
             </div>
 
             <div class="flex-auto">
@@ -35,7 +37,9 @@ export default {
 <Avatar image="/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
 <Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
 
-<Avatar v-badge.danger="4" class="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge" />
+<OverlayBadge value="4" severity="danger" class="inline-flex">
+    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+</OverlayBadge>
 
 <Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex items-center justify-center mr-2" size="xlarge" />
 `,
@@ -52,7 +56,9 @@ export default {
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
             </div>
 
             <div class="flex-auto">
@@ -80,7 +86,9 @@ export default {
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge.danger="4" class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" size="xlarge" />
+                </OverlayBadge>
             </div>
 
             <div class="flex-auto">
diff --git a/doc/avatar/LabelDoc.vue b/doc/avatar/LabelDoc.vue
index fd57ec594..73f399b10 100644
--- a/doc/avatar/LabelDoc.vue
+++ b/doc/avatar/LabelDoc.vue
@@ -20,7 +20,9 @@
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge.danger="4" label="U" size="xlarge" />
+                <OverlayBadge value="4" severity="danger" class="inline-flex">
+                    <Avatar label="U" size="xlarge" />
+                </OverlayBadge>
             </div>
         </div>
     </div>
@@ -41,7 +43,9 @@ export default {
 <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
 <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
 
-<Avatar v-badge.danger="4" label="U" size="xlarge" />
+<OverlayBadge value="4" severity="danger" class="inline-flex">
+    <Avatar label="U" size="xlarge" />
+</OverlayBadge>
 `,
                 options: `
 <template>
@@ -62,7 +66,9 @@ export default {
 
         <div class="flex-auto">
             <h5>Badge</h5>
-            <Avatar v-badge.danger="4" label="U" size="xlarge" />
+            <OverlayBadge value="4" severity="danger" class="inline-flex">
+                <Avatar label="U" size="xlarge" />
+            </OverlayBadge>
         </div>
     </div>
 </template>
@@ -90,7 +96,9 @@ export default {
 
         <div class="flex-auto">
             <h5>Badge</h5>
-            <Avatar v-badge.danger="4" label="U" size="xlarge" />
+            <OverlayBadge value="4" severity="danger" class="inline-flex">
+                <Avatar label="U" size="xlarge" />
+            </OverlayBadge>
         </div>
     </div>
 </template>
diff --git a/doc/badge/ImportDoc.vue b/doc/badge/ImportDoc.vue
index c1d89f28c..d79603529 100644
--- a/doc/badge/ImportDoc.vue
+++ b/doc/badge/ImportDoc.vue
@@ -11,11 +11,7 @@ export default {
                 basic: `
 // import as component
 import Badge from 'primevue/badge';
-
-// import as directive
-import BadgeDirective from 'primevue/badgedirective';
-
-app.directive('badge', BadgeDirective);
+import OverlayBadge from 'primevue/overlaybadge'; // optional
 `
             }
         };
diff --git a/doc/badge/PositionDoc.vue b/doc/badge/PositionDoc.vue
index 17bb67f83..6f948c7b5 100644
--- a/doc/badge/PositionDoc.vue
+++ b/doc/badge/PositionDoc.vue
@@ -3,15 +3,15 @@
         <p>A Badge can be added to any element using the directive.</p>
     </DocSectionText>
     <div class="card flex flex-wrap justify-center gap-6">
-        <span v-badge="2">
+        <OverlayBadge value="2">
             <i class="pi pi-bell" style="font-size: 2rem" />
-        </span>
-        <span v-badge.danger="'5+'">
+        </OverlayBadge>
+        <OverlayBadge value="5+" severity="danger">
             <i class="pi pi-calendar" style="font-size: 2rem" />
-        </span>
-        <span v-badge.danger>
+        </OverlayBadge>
+        <OverlayBadge severity="danger">
             <i class="pi pi-envelope" style="font-size: 2rem" />
-        </span>
+        </OverlayBadge>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -22,28 +22,28 @@ export default {
         return {
             code: {
                 basic: `
-<span v-badge="2">
+<OverlayBadge value="2">
     <i class="pi pi-bell" style="font-size: 2rem" />
-</span>
-<span v-badge.danger="'5+'">
+</OverlayBadge>
+<OverlayBadge value="5+" severity="danger">
     <i class="pi pi-calendar" style="font-size: 2rem" />
-</span>
-<span v-badge.danger>
+</OverlayBadge>
+<OverlayBadge severity="danger">
     <i class="pi pi-envelope" style="font-size: 2rem" />
-</span>
+</OverlayBadge>
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-center gap-6">
-        <span v-badge="2">
+        <OverlayBadge value="2">
             <i class="pi pi-bell" style="font-size: 2rem" />
-        </span>
-        <span v-badge.danger="'5+'">
+        </OverlayBadge>
+        <OverlayBadge value="5+" severity="danger">
             <i class="pi pi-calendar" style="font-size: 2rem" />
-        </span>
-        <span v-badge.danger>
+        </OverlayBadge>
+        <OverlayBadge severity="danger">
             <i class="pi pi-envelope" style="font-size: 2rem" />
-        </span>
+        </OverlayBadge>
     </div>
 </template>
 
@@ -54,15 +54,15 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap justify-center gap-6">
-        <span v-badge="2">
+        <OverlayBadge value="2">
             <i class="pi pi-bell" style="font-size: 2rem" />
-        </span>
-        <span v-badge.danger="'5+'">
+        </OverlayBadge>
+        <OverlayBadge value="5+" severity="danger">
             <i class="pi pi-calendar" style="font-size: 2rem" />
-        </span>
-        <span v-badge.danger>
+        </OverlayBadge>
+        <OverlayBadge severity="danger">
             <i class="pi pi-envelope" style="font-size: 2rem" />
-        </span>
+        </OverlayBadge>
     </div>
 </template>
 
diff --git a/doc/badge/theming/index.vue b/doc/badge/theming/index.vue
index efd77cdb0..b5a442fea 100644
--- a/doc/badge/theming/index.vue
+++ b/doc/badge/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,29 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    children: [
+                        {
+                            id: 'theming.classes.badge',
+                            label: 'Badge CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('Badge')
+                        },
+                        {
+                            id: 'theming.classes.overlaybadge',
+                            label: 'OverlayBadge CSS Classes',
+                            description: 'List of class names used in the styled mode.',
+                            component: DocApiTable,
+                            data: getStyleOptions('OverlayBadge')
+                        },
+                        {
+                            id: 'theming.tokens',
+                            label: 'Design Tokens',
+                            description: 'List of design tokens used in a preset.',
+                            component: DocApiTable,
+                            data: getTokenOptions('Badge')
+                        }
+                    ]
                 },
                 {
                     id: 'theming.unstyled',
diff --git a/pages/badge/index.vue b/pages/badge/index.vue
index 2d7b9be55..1ff47b167 100644
--- a/pages/badge/index.vue
+++ b/pages/badge/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'BadgeDirective']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" :apiDocs="['Badge', 'OverlayBadge']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>