diff --git a/doc/badge/ButtonDoc.vue b/doc/badge/ButtonDoc.vue
index 64ee4242a..602336820 100644
--- a/doc/badge/ButtonDoc.vue
+++ b/doc/badge/ButtonDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Button type="button" label="Emails" badge="8" />
-        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeClass="p-badge-info" />
+        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,13 +16,13 @@ export default {
             code: {
                 basic: `
 <Button type="button" label="Emails" badge="8" />
-<Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeClass="p-badge-info" />
+<Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
 `,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Button type="button" label="Emails" badge="8" />
-        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeClass="p-badge-info" />
+        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
     </div>
 </template>
 
@@ -33,7 +33,7 @@ export default {
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Button type="button" label="Emails" badge="8" />
-        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeClass="p-badge-info" />
+        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeSeverity="info" />
     </div>
 </template>