Refactor #5071

components/lib/togglebutton/ToggleButton.d.ts

@@ -61,6 +61,10 @@ export interface ToggleButtonPassThroughOptions {
      * Used to pass attributes to the input's DOM element.
      */
     input?: ToggleButtonPassThroughOptionType;
+    /**
+     * Used to pass attributes to the box's DOM element.
+     */
+    box?: ToggleButtonPassThroughOptionType;
     /**
      * Used to pass attributes to the icon's DOM element.
      */

components/lib/togglebutton/ToggleButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-ripple :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="togglebutton" :data-p-highlight="active" :data-p-disabled="disabled">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="togglebutton" :data-p-highlight="active" :data-p-disabled="disabled">
         <input
             :id="inputId"
             type="checkbox"
@@ -18,10 +18,12 @@
             @change="onChange"
             v-bind="getPTOptions('input')"
         />
-        <slot name="icon" :value="modelValue" :class="cx('icon')">
-            <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
-        </slot>
-        <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
+        <div v-ripple :class="cx('box')" v-bind="getPTOptions('box')">
+            <slot name="icon" :value="modelValue" :class="cx('icon')">
+                <span v-if="onIcon || offIcon" :class="[cx('icon'), modelValue ? onIcon : offIcon]" v-bind="getPTOptions('icon')" />
+            </slot>
+            <span :class="cx('label')" v-bind="getPTOptions('label')">{{ label }}</span>
+        </div>
     </div>
 </template>
 

components/lib/togglebutton/style/ToggleButtonStyle.js

@@ -3,49 +3,37 @@ import BaseStyle from 'primevue/base/style';
 const css = `
 @layer primevue {
     .p-togglebutton {
+        position: relative;
         display: inline-flex;
         user-select: none;
-        align-items: center;
         vertical-align: bottom;
-        text-align: center;
-        overflow: hidden;
-        position: relative;
     }
 
     .p-togglebutton-input {
         cursor: pointer;
     }
 
-    .p-button-label {
+    .p-togglebutton .p-button {
         flex: 1 1 auto;
     }
-
-    .p-button-icon-right {
-        order: 1;
-    }
-
-    .p-button-icon-only {
-        justify-content: center;
-    }
-
-    .p-button-icon-only .p-button-label {
-        visibility: hidden;
-        width: 0;
-        flex: 0 0 auto;
-    }
 }
 `;
 
 const classes = {
     root: ({ instance, props }) => [
-        'p-togglebutton p-button p-component',
+        'p-togglebutton p-component',
         {
-            'p-button-icon-only': instance.hasIcon && !instance.hasLabel,
             'p-disabled': props.disabled,
             'p-highlight': instance.active
         }
     ],
     input: 'p-togglebutton-input',
+    box: ({ instance }) => [
+        'p-button p-component',
+        {
+            'p-button-icon-only': instance.hasIcon && !instance.hasLabel
+        }
+    ],
     icon: ({ instance, props }) => [
         'p-button-icon',
         {