diff --git a/doc/styleclass/AnimationDoc.vue b/doc/styleclass/AnimationDoc.vue
index 409b58542..e6f623103 100644
--- a/doc/styleclass/AnimationDoc.vue
+++ b/doc/styleclass/AnimationDoc.vue
@@ -8,7 +8,7 @@
     <div class="card flex flex-column align-items-center">
         <div>
             <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
+            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
         </div>
         <div class="hidden animation-duration-500 box">
             <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
@@ -24,7 +24,7 @@ export default {
             code: {
                 basic: `
 <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
+<Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
 <div class="hidden animation-duration-500 box">
     <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
 </div>
@@ -34,7 +34,7 @@ export default {
     <div class="card flex flex-column align-items-center">
         <div>
             <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
+            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
         </div>
         <div class="hidden animation-duration-500 box">
             <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
@@ -94,7 +94,7 @@ export default {
     <div class="card flex flex-column align-items-center">
         <div>
             <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
-            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" />
+            <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
         </div>
         <div class="hidden animation-duration-500 box">
             <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
diff --git a/doc/styleclass/ToggleClassDoc.vue b/doc/styleclass/ToggleClassDoc.vue
index b23db2116..171dba46f 100644
--- a/doc/styleclass/ToggleClassDoc.vue
+++ b/doc/styleclass/ToggleClassDoc.vue
@@ -3,7 +3,7 @@
         <p>StyleClass has two modes, <i>toggleClass</i> to simply add-remove a class and enter/leave animations.</p>
     </DocSectionText>
     <div class="card flex flex-column align-items-center gap-3">
-        <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
+        <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle .p-disabled" />
         <InputText />
     </div>
     <DocSectionCode :code="code" />
@@ -21,7 +21,7 @@ export default {
                 options: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
-        <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
+        <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle .p-disabled" />
         <InputText />
     </div>
 </template>
@@ -32,7 +32,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-column align-items-center gap-3">
-        <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle p-disabled" />
+        <Button v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" label="Toggle .p-disabled" />
         <InputText />
     </div>
 </template>