diff --git a/apps/showcase/doc/speeddial/CircleDoc.vue b/apps/showcase/doc/speeddial/CircleDoc.vue
index 50749edc4..5dab22aeb 100644
--- a/apps/showcase/doc/speeddial/CircleDoc.vue
+++ b/apps/showcase/doc/speeddial/CircleDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
-            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warning' }" />
+            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -53,13 +53,13 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warning' }" />
+<SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
-            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warning' }" />
+            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
             <Toast />
         </div>
     </div>
@@ -115,7 +115,7 @@ export default {
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '500px' }" class="flex items-center justify-center">
-            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warning' }" />
+            <SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />
             <Toast />
         </div>
     </div>
diff --git a/apps/showcase/doc/speeddial/TemplateDoc.vue b/apps/showcase/doc/speeddial/TemplateDoc.vue
index e685f0f28..ba29ae75e 100644
--- a/apps/showcase/doc/speeddial/TemplateDoc.vue
+++ b/apps/showcase/doc/speeddial/TemplateDoc.vue
@@ -9,7 +9,7 @@
         <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
             <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
                 <template #button="{ toggleCallback }">
-                    <Button outlined class="border-2" @click="toggleCallback">
+                    <Button outlined class="border" @click="toggleCallback">
                         <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path
                                 d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -81,7 +81,7 @@ export default {
                 basic: `
 <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
     <template #button="{ toggleCallback }">
-        <Button outlined class="border-2" @click="toggleCallback">
+        <Button outlined class="border" @click="toggleCallback">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="..." fill="var(--p-primary-color)" />
                 <path d="..." fill="var(--p-text-color)" />
@@ -104,7 +104,7 @@ export default {
         <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
             <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
                 <template #button="{ toggleCallback }">
-                    <Button outlined class="border-2" @click="toggleCallback">
+                    <Button outlined class="border" @click="toggleCallback">
                         <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="..." fill="var(--p-primary-color)" />
                             <path d="..." fill="var(--p-text-color)" />
@@ -177,7 +177,7 @@ export default {
         <div class="flex items-end justify-center" :style="{ position: 'relative', height: '400px' }">
             <SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
                 <template #button="{ toggleCallback }">
-                    <Button outlined class="border-2" @click="toggleCallback">
+                    <Button outlined class="border" @click="toggleCallback">
                         <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path d="..." fill="var(--p-primary-color)" />
                             <path d="..." fill="var(--p-text-color)" />
diff --git a/apps/showcase/doc/speeddial/TooltipDoc.vue b/apps/showcase/doc/speeddial/TooltipDoc.vue
index 27ecf1608..3e43b9b46 100644
--- a/apps/showcase/doc/speeddial/TooltipDoc.vue
+++ b/apps/showcase/doc/speeddial/TooltipDoc.vue
@@ -4,8 +4,8 @@
     </DocSectionText>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help' }" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger' }" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -54,15 +54,15 @@ export default {
             ],
             code: {
                 basic: `
-<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help' }" :tooltipOptions="{ position: 'left' }" />
-<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger' }" :tooltipOptions="{ position: 'right' }" />
+<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
+<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
 `,
                 options: `
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help' }" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger' }" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
             <Toast />
         </div>
     </div>
@@ -118,8 +118,8 @@ export default {
 <template>
     <div class="card">
         <div :style="{ position: 'relative', height: '350px' }">
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help' }" :tooltipOptions="{ position: 'left' }" />
-            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger' }" :tooltipOptions="{ position: 'right' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
+            <SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />
             <Toast />
         </div>
     </div>