diff --git a/apps/showcase/doc/badge/BasicDoc.vue b/apps/showcase/doc/badge/BasicDoc.vue
index ea02a9773..937e7910f 100644
--- a/apps/showcase/doc/badge/BasicDoc.vue
+++ b/apps/showcase/doc/badge/BasicDoc.vue
@@ -1,9 +1,10 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text to display is defined with the <i>value</i> property.</p>
+        <p>Content to display is defined with the <i>value</i> property or the default slot.</p>
     </DocSectionText>
-    <div class="card flex justify-center">
+    <div class="card flex justify-center gap-2">
         <Badge value="2"></Badge>
+        <Badge>10</Badge>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,11 +16,13 @@ export default {
             code: {
                 basic: `
 <Badge value="2"></Badge>
+<Badge>10</Badge>
 `,
                 options: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex justify-center gap-2">
         <Badge value="2"></Badge>
+        <Badge>10</Badge>
     </div>
 </template>
 
@@ -29,8 +32,9 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center">
+    <div class="card flex justify-center gap-2">
         <Badge value="2"></Badge>
+        <Badge>10</Badge>
     </div>
 </template>
 
diff --git a/apps/volt/assets/data/menu.json b/apps/volt/assets/data/menu.json
index 54fbfd9ef..9922a876a 100644
--- a/apps/volt/assets/data/menu.json
+++ b/apps/volt/assets/data/menu.json
@@ -26,6 +26,10 @@
                     "name": "Avatar",
                     "to": "/avatar"
                 },
+                {
+                    "name": "Badge",
+                    "to": "/badge"
+                },
                 {
                     "name": "Button",
                     "to": "/button"
diff --git a/apps/volt/assets/styles/tailwind.css b/apps/volt/assets/styles/tailwind.css
index dc3c1ce7e..4ecc1b5f9 100644
--- a/apps/volt/assets/styles/tailwind.css
+++ b/apps/volt/assets/styles/tailwind.css
@@ -33,6 +33,7 @@
 @custom-variant p-readonly (&[data-p~="readonly"]);
 @custom-variant p-removable (&[data-p~="removable"]);
 @custom-variant p-circle (&[data-p~="circle"]);
+@custom-variant p-empty (&[data-p~="empty"]);
 @custom-variant p-determinate (&[data-p~="determinate"]);
 @custom-variant p-indeterminate (&[data-p~="indeterminate"]);
 @custom-variant p-icon-only (&[data-p~="icon-only"]);
@@ -43,4 +44,10 @@
 @custom-variant p-toggleable (&[data-p~="toggleable"]);
 @custom-variant p-solid (&[data-p~="solid"]);
 @custom-variant p-dashed (&[data-p~="dashed"]);
-@custom-variant p-dotted (&[data-p~="dotted"]);
\ No newline at end of file
+@custom-variant p-dotted (&[data-p~="dotted"]);
+@custom-variant p-secondary (&[data-p~="secondary"]);
+@custom-variant p-contrast (&[data-p~="contrast"]);
+@custom-variant p-success (&[data-p~="success"]);
+@custom-variant p-info (&[data-p~="info"]);
+@custom-variant p-warn (&[data-p~="warn"]);
+@custom-variant p-danger (&[data-p~="danger"]);
\ No newline at end of file
diff --git a/apps/volt/doc/badge/BasicDoc.vue b/apps/volt/doc/badge/BasicDoc.vue
new file mode 100644
index 000000000..48ba78a8a
--- /dev/null
+++ b/apps/volt/doc/badge/BasicDoc.vue
@@ -0,0 +1,28 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Content to display is defined with the <i>value</i> property or the default slot.</p>
+    </DocSectionText>
+    <div class="card flex justify-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge>10</Badge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Badge from '@/volt/badge';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge>10</Badge>
+    </div>
+</template>
+
+<script setup>
+import Badge from '@/volt/badge';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/badge/ButtonDoc.vue b/apps/volt/doc/badge/ButtonDoc.vue
new file mode 100644
index 000000000..c53f2a3b2
--- /dev/null
+++ b/apps/volt/doc/badge/ButtonDoc.vue
@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Buttons have built-in badge support with the <i>badge</i> property.</p>
+    </DocSectionText>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex justify-center flex-wrap gap-4">
+        <Button type="button" label="Emails" badge="2" />
+    </div>
+</template>
+
+<script setup>
+import Button from '@/volt/button';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/badge/ImportDoc.vue b/apps/volt/doc/badge/ImportDoc.vue
new file mode 100644
index 000000000..0d1d1228b
--- /dev/null
+++ b/apps/volt/doc/badge/ImportDoc.vue
@@ -0,0 +1,16 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" lang="script" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: `import Badge from '@/volt/badge';
+import OverlayBadge from '@/volt/overlaybadge';
+`
+        };
+    }
+};
+</script>
diff --git a/apps/volt/doc/badge/OverlayDoc.vue b/apps/volt/doc/badge/OverlayDoc.vue
new file mode 100644
index 000000000..fdb54a4d1
--- /dev/null
+++ b/apps/volt/doc/badge/OverlayDoc.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>A badge can be added to any element by encapsulating the content with the <i>OverlayBadge</i> component.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-6">
+        <OverlayBadge value="2">
+            <i class="pi pi-bell" style="font-size: 2rem" />
+        </OverlayBadge>
+        <OverlayBadge value="4" severity="danger">
+            <i class="pi pi-calendar" style="font-size: 2rem" />
+        </OverlayBadge>
+        <OverlayBadge severity="danger">
+            <i class="pi pi-envelope" style="font-size: 2rem" />
+        </OverlayBadge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import OverlayBadge from '@/volt/overlaybadge';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap justify-center gap-6">
+        <OverlayBadge value="2">
+            <i class="pi pi-bell" style="font-size: 2rem" />
+        </OverlayBadge>
+        <OverlayBadge value="4" severity="danger">
+            <i class="pi pi-calendar" style="font-size: 2rem" />
+        </OverlayBadge>
+        <OverlayBadge severity="danger">
+            <i class="pi pi-envelope" style="font-size: 2rem" />
+        </OverlayBadge>
+    </div>
+</template>
+
+<script setup>
+import OverlayBadge from '@/volt/overlaybadge';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/badge/SeverityDoc.vue b/apps/volt/doc/badge/SeverityDoc.vue
new file mode 100644
index 000000000..0f5734c34
--- /dev/null
+++ b/apps/volt/doc/badge/SeverityDoc.vue
@@ -0,0 +1,38 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Severity defines the variant of a badge.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge value="6" severity="secondary"></Badge>
+        <Badge value="8" severity="success"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="9" severity="warn"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+        <Badge value="5" severity="contrast"></Badge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Badge from '@/volt/badge';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <Badge value="2"></Badge>
+        <Badge value="6" severity="secondary"></Badge>
+        <Badge value="8" severity="success"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="9" severity="warn"></Badge>
+        <Badge value="3" severity="danger"></Badge>
+        <Badge value="5" severity="contrast"></Badge>
+    </div>
+</template>
+
+<script setup>
+import Badge from '@/volt/badge';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/badge/SizeDoc.vue b/apps/volt/doc/badge/SizeDoc.vue
new file mode 100644
index 000000000..4a991f416
--- /dev/null
+++ b/apps/volt/doc/badge/SizeDoc.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Use the <i>size</i> property to customize the dimensions of a Badge.</p>
+    </DocSectionText>
+    <div class="card flex flex-wrap justify-center items-end gap-2">
+        <Badge value="8" size="xlarge" severity="success"></Badge>
+        <Badge value="6" size="large" severity="warn"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="2" size="small"></Badge>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script setup>
+import Badge from '@/volt/badge';
+import { ref } from 'vue';
+
+const code = ref(`
+<template>
+    <div class="card flex flex-wrap justify-center items-end gap-2">
+        <Badge value="8" size="xlarge" severity="success"></Badge>
+        <Badge value="6" size="large" severity="warn"></Badge>
+        <Badge value="4" severity="info"></Badge>
+        <Badge value="2" size="small"></Badge>
+    </div>
+</template>
+
+<script setup>
+import Badge from '@/volt/badge';
+<\/script>
+`);
+</script>
diff --git a/apps/volt/doc/button/BadgeDoc.vue b/apps/volt/doc/button/BadgeDoc.vue
index b9e48ed0b..c53f2a3b2 100644
--- a/apps/volt/doc/button/BadgeDoc.vue
+++ b/apps/volt/doc/button/BadgeDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Buttons have built-in badge support with <i>badge</i> and <i>badgeSeverity</i> properties.</p>
+        <p>Buttons have built-in badge support with the <i>badge</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button type="button" label="Emails" badge="2" />
diff --git a/apps/volt/pages/badge/index.vue b/apps/volt/pages/badge/index.vue
new file mode 100644
index 000000000..3b78afd1a
--- /dev/null
+++ b/apps/volt/pages/badge/index.vue
@@ -0,0 +1,46 @@
+<template>
+    <DocComponent title="Vue Badge Component" header="Badge" description="Badge is a small status indicator for another element." :componentDocs="docs" />
+</template>
+
+<script setup>
+import BasicDoc from '@/doc/badge/BasicDoc.vue';
+import ButtonDoc from '@/doc/badge/ButtonDoc.vue';
+import ImportDoc from '@/doc/badge/ImportDoc.vue';
+import OverlayDoc from '@/doc/badge/OverlayDoc.vue';
+import SeverityDoc from '@/doc/badge/SeverityDoc.vue';
+import SizeDoc from '@/doc/badge/SizeDoc.vue';
+import { ref } from 'vue';
+
+const docs = ref([
+    {
+        id: 'import',
+        label: 'Import',
+        component: ImportDoc
+    },
+    {
+        id: 'basic',
+        label: 'Basic',
+        component: BasicDoc
+    },
+    {
+        id: 'severity',
+        label: 'Severity',
+        component: SeverityDoc
+    },
+    {
+        id: 'size',
+        label: 'Size',
+        component: SizeDoc
+    },
+    {
+        id: 'overlay',
+        label: 'Overlay',
+        component: OverlayDoc
+    },
+    {
+        id: 'button',
+        label: 'Button',
+        component: ButtonDoc
+    }
+]);
+</script>
diff --git a/apps/volt/volt/badge/index.vue b/apps/volt/volt/badge/index.vue
new file mode 100644
index 000000000..322615f77
--- /dev/null
+++ b/apps/volt/volt/badge/index.vue
@@ -0,0 +1,36 @@
+<template>
+    <Badge
+        unstyled
+        :pt="theme"
+        :ptOptions="{
+            mergeProps: ptViewMerge
+        }"
+    >
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="slotProps">
+            <slot :name="slotName" v-bind="slotProps ?? {}" />
+        </template>
+    </Badge>
+</template>
+
+<script setup>
+import Badge from 'primevue/badge';
+import { ref } from 'vue';
+import { ptViewMerge } from '../utils';
+
+const theme = ref({
+    root: `inline-flex items-center justify-center rounded-md
+        py-0 px-2 text-xs font-bold min-w-6 h-6
+        bg-primary text-primary-contrast
+        p-empty:min-w-2 p-empty:h-2 p-empty:rounded-full p-empty:p-0
+        p-circle:p-0 p-circle:rounded-full
+        p-secondary:bg-surface-100 dark:p-secondary:bg-surface-800 p-secondary:text-surface-600 dark:p-secondary:text-surface-300
+        p-success:bg-green-500 dark:p-success:bg-green-400 p-success:text-white dark:p-success:text-green-950
+        p-info:bg-sky-500 dark:p-info:bg-sky-400 p-info:text-white dark:p-info:text-sky-950
+        p-warn:bg-orange-500 dark:p-warn:bg-orange-400 p-warn:text-white dark:p-warn:text-orange-950
+        p-danger:bg-red-500 dark:p-danger:bg-red-400 p-danger:text-white dark:p-danger:text-red-950
+        p-contrast:bg-surface-950 dark:p-contrast:bg-white p-contrast:text-white dark:p-contrast:text-surface-950
+        p-small:text-[0.625rem] p-small:min-w-5 p-small:h-5
+        p-large:text-sm p-large:min-w-7 p-large:h-7
+        p-xlarge:text-base p-xlarge:min-w-8 p-xlarge:h-8`
+});
+</script>
diff --git a/apps/volt/volt/overlaybadge/index.vue b/apps/volt/volt/overlaybadge/index.vue
new file mode 100644
index 000000000..502bc905d
--- /dev/null
+++ b/apps/volt/volt/overlaybadge/index.vue
@@ -0,0 +1,14 @@
+<template>
+    <div class="relative">
+        <slot />
+        <Badge v-bind="$attrs" class="absolute top-0 end-0 translate-x-[50%] translate-y-[-50%] origin-[100%_0] m-0 outline-2 outline-surface-0 dark:outline-surface-900" />
+    </div>
+</template>
+
+<script setup>
+import Badge from '../badge';
+
+defineOptions({
+    inheritAttrs: false
+});
+</script>
diff --git a/packages/primevue/src/badge/Badge.vue b/packages/primevue/src/badge/Badge.vue
index d1dc2e338..3127abcde 100644
--- a/packages/primevue/src/badge/Badge.vue
+++ b/packages/primevue/src/badge/Badge.vue
@@ -1,15 +1,26 @@
 <template>
-    <span :class="cx('root')" v-bind="ptmi('root')">
+    <span :class="cx('root')" :data-p="dataP" data-badge v-bind="ptmi('root')">
         <slot>{{ value }}</slot>
     </span>
 </template>
 
 <script>
+import { cn } from '@primeuix/utils';
 import BaseBadge from './BaseBadge.vue';
 
 export default {
     name: 'Badge',
     extends: BaseBadge,
-    inheritAttrs: false
+    inheritAttrs: false,
+    computed: {
+        dataP() {
+            return cn({
+                circle: this.value != null && String(this.value).length === 1,
+                empty: this.value == null && !this.$slots.default,
+                [this.severity]: this.severity,
+                [this.size]: this.size
+            });
+        }
+    }
 };
 </script>