diff --git a/doc/badge/ButtonDoc.vue b/doc/badge/ButtonDoc.vue
index 15d46cb76..64ee4242a 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="warning" badge="8" badgeClass="p-badge-danger" />
+        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeClass="p-badge-info" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,30 +16,28 @@ export default {
             code: {
                 basic: `
 <Button type="button" label="Emails" badge="8" />
-<Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
+<Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeClass="p-badge-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="warning" badge="8" badgeClass="p-badge-danger" />
+        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeClass="p-badge-info" />
     </div>
 </template>
 
 <script>
-
 <\/script>
 `,
                 composition: `
 <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="warning" badge="8" badgeClass="p-badge-danger" />
+        <Button type="button" label="Messages" icon="pi pi-users" severity="secondary" badge="4" badgeClass="p-badge-info" />
     </div>
 </template>
 
 <script setup>
-
 <\/script>
 `
             }