Fixed z-index issue

components/lib/togglebutton/ToggleButton.d.ts

@@ -53,6 +53,10 @@ export interface ToggleButtonPassThroughOptions<T = any> {
      * Used to pass attributes to the root's DOM element.
      */
     root?: ToggleButtonPassThroughOptionType<T>;
+    /**
+     * Used to pass attributes to the content's DOM element.
+     */
+    content?: ToggleButtonPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the icon's DOM element.
      */

components/lib/togglebutton/ToggleButton.vue

@@ -1,11 +1,13 @@
 <template>
     <button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
+        <span :class="cx('content')" v-bind="getPTOptions('content')">
             <slot>
                 <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>
             </slot>
+        </span>
     </button>
 </template>
 

components/lib/togglebutton/style/ToggleButtonStyle.js

@@ -19,10 +19,17 @@ const theme = ({ dt }) => `
     transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
     border-radius: ${dt('togglebutton.border.radius')};
     outline-color: transparent;
-    gap: ${dt('togglebutton.gap')};
     font-weight: ${dt('togglebutton.font.weight')};
 }
 
+.p-togglebutton-content {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${dt('togglebutton.gap')};
+}
+
 .p-togglebutton-label,
 .p-togglebutton-icon {
     position: relative;
@@ -100,6 +107,7 @@ const classes = {
             'p-invalid': props.invalid
         }
     ],
+    content: 'p-togglebutton-content',
     icon: 'p-togglebutton-icon',
     label: 'p-togglebutton-label'
 };