diff --git a/doc/splitbutton/OutlinedDoc.vue b/doc/splitbutton/OutlinedDoc.vue
index d612ec441..081ed8086 100644
--- a/doc/splitbutton/OutlinedDoc.vue
+++ b/doc/splitbutton/OutlinedDoc.vue
@@ -3,13 +3,13 @@
         <p>Outlined buttons display a border without a background initially.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,25 +44,25 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
     </div>
 </template>
 
@@ -108,13 +108,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" outlined severity="danger"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/RaisedDoc.vue b/doc/splitbutton/RaisedDoc.vue
index d60838e2f..7fa535615 100644
--- a/doc/splitbutton/RaisedDoc.vue
+++ b/doc/splitbutton/RaisedDoc.vue
@@ -3,13 +3,13 @@
         <p>Raised buttons display a shadow to indicate elevation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,25 +44,25 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
     </div>
 </template>
 
@@ -108,13 +108,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised severity="danger"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/RaisedTextDoc.vue b/doc/splitbutton/RaisedTextDoc.vue
index 3dc73b675..509af7e8e 100644
--- a/doc/splitbutton/RaisedTextDoc.vue
+++ b/doc/splitbutton/RaisedTextDoc.vue
@@ -3,13 +3,13 @@
         <p>Text buttons can be displayed as raised as well for elevation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,25 +44,25 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
     </div>
 </template>
 
@@ -108,13 +108,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" raised text severity="danger"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/RoundedDoc.vue b/doc/splitbutton/RoundedDoc.vue
index be526de4b..613dee3f1 100644
--- a/doc/splitbutton/RoundedDoc.vue
+++ b/doc/splitbutton/RoundedDoc.vue
@@ -3,13 +3,13 @@
         <p>Rounded buttons have a circular border radius.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,25 +44,25 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
     </div>
 </template>
 
@@ -108,13 +108,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" rounded severity="danger"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/SeverityDoc.vue b/doc/splitbutton/SeverityDoc.vue
index e0a1d26cd..d03cc7f33 100644
--- a/doc/splitbutton/SeverityDoc.vue
+++ b/doc/splitbutton/SeverityDoc.vue
@@ -3,13 +3,13 @@
         <p>The <i>severity</i> option specifies the type of the message.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,25 +44,25 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
     </div>
 </template>
 
@@ -108,13 +108,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" severity="danger"></SplitButton>
     </div>
 </template>
 
diff --git a/doc/splitbutton/TextDoc.vue b/doc/splitbutton/TextDoc.vue
index 80c0172f8..18ed80e8d 100644
--- a/doc/splitbutton/TextDoc.vue
+++ b/doc/splitbutton/TextDoc.vue
@@ -3,13 +3,13 @@
         <p>Text buttons are displayed as textual elements.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,25 +44,25 @@ export default {
             ],
             code: {
                 basic: `
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
-<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton>
+<SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton>
     </div>
 </template>
 
@@ -108,13 +108,13 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Toast />
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help" class="mb-2"></SplitButton>
-        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger" class="mb-2"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="secondary"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="success"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="info"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="warning"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="help"></SplitButton>
+        <SplitButton label="Save" :model="items" icon="pi pi-plus" @click="save" text severity="danger"></SplitButton>
     </div>
 </template>