New *ButtonProps properties added - I

components/lib/carousel/BaseCarousel.vue

@@ -48,12 +48,16 @@ export default {
             default: true
         },
         prevButtonProps: {
-            type: null,
+            type: Object,
-            default: null
+            default: () => {
+                return { severity: 'secondary', text: true, rounded: true };
+            }
         },
         nextButtonProps: {
-            type: null,
+            type: Object,
-            default: null
+            default: () => {
+                return { severity: 'secondary', text: true, rounded: true };
+            }
         }
     },
     style: CarouselStyle,

components/lib/carousel/Carousel.d.ts

@@ -7,8 +7,9 @@
  * @module carousel
  *
  */
-import { ButtonHTMLAttributes, VNode } from 'vue';
+import { VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ButtonPassThroughOptions } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -48,6 +49,20 @@ export interface CarouselPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface CarouselSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: CarouselProps;
+    /**
+     * Defines current inline state.
+     */
+    state: CarouselState;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link CarouselProps.pt}
@@ -71,12 +86,9 @@ export interface CarouselPassThroughOptions {
     container?: CarouselPassThroughOptionType;
     /**
      * Used to pass attributes to the previous button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
      */
-    previousButton?: CarouselPassThroughOptionType;
+    previousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the previous button icon's DOM element.
-     */
-    previousButtonIcon?: CarouselPassThroughOptionType;
     /**
      * Used to pass attributes to the items content's DOM element.
      */
@@ -95,12 +107,9 @@ export interface CarouselPassThroughOptions {
     item?: CarouselPassThroughOptionType;
     /**
      * Used to pass attributes to the next button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
      */
-    nextButton?: CarouselPassThroughOptionType;
+    nextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the next button icon's DOM element.
-     */
-    nextButtonIcon?: CarouselPassThroughOptionType;
     /**
      * Used to pass attributes to the indicators's DOM element.
      */
@@ -288,13 +297,15 @@ export interface CarouselProps {
      */
     showIndicators?: boolean | undefined;
     /**
-     * Used to pass all properties of the HTMLButtonElement to the previous navigation button.
+     * Used to pass attributes to the previous Button component.
+     * @defaultValue { severity: 'secondary', text: true, rounded: true }
      */
-    prevButtonProps?: ButtonHTMLAttributes | undefined;
+    prevButtonProps?: object | undefined;
     /**
-     * Used to pass all properties of the HTMLButtonElement to the next navigation button.
+     * Used to pass attributes to the next Button component.
+     * @defaultValue { severity: 'secondary', text: true, rounded: true }
      */
-    nextButtonProps?: ButtonHTMLAttributes | undefined;
+    nextButtonProps?: object | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

components/lib/carousel/Carousel.vue

@@ -5,21 +5,23 @@
         </div>
         <div v-if="!empty" :class="[cx('content'), contentClass]" v-bind="ptm('content')">
             <div :class="[cx('container'), containerClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('container')">
-                <button
+                <Button
                     v-if="showNavigators"
-                    v-ripple
-                    type="button"
                     :class="cx('previousButton')"
                     :disabled="backwardIsDisabled"
                     :aria-label="ariaPrevButtonLabel"
+                    :unstyled="unstyled"
                     @click="navBackward"
-                    v-bind="{ ...prevButtonProps, ...ptm('previousButton') }"
+                    v-bind="prevButtonProps"
+                    :pt="ptm('previousButton')"
                     data-pc-group-section="navigator"
                 >
-                    <slot name="previousicon">
+                    <template #icon="slotProps">
-                        <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="cx('previousButtonIcon')" v-bind="ptm('previousButtonIcon')" />
+                        <slot name="previousicon">
-                    </slot>
+                            <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="[cx('previousButtonIcon'), slotProps.icon]" v-bind="ptm('previousButton')['icon']" />
-                </button>
+                        </slot>
+                    </template>
+                </Button>
 
                 <div :class="cx('itemsContent')" :style="[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]" @touchend="onTouchEnd" @touchstart="onTouchStart" @touchmove="onTouchMove" v-bind="ptm('itemsContent')">
                     <div ref="itemsContainer" :class="cx('itemsContainer')" @transitionend="onTransitionEnd" v-bind="ptm('itemsContainer')">
@@ -58,22 +60,23 @@
                         </template>
                     </div>
                 </div>
-
+                <Button
-                <button
                     v-if="showNavigators"
-                    v-ripple
-                    type="button"
                     :class="cx('nextButton')"
                     :disabled="forwardIsDisabled"
                     :aria-label="ariaNextButtonLabel"
+                    :unstyled="unstyled"
                     @click="navForward"
-                    v-bind="{ ...nextButtonProps, ...ptm('nextButton') }"
+                    v-bind="nextButtonProps"
+                    :pt="ptm('nextButton')"
                     data-pc-group-section="navigator"
                 >
-                    <slot name="nexticon">
+                    <template #icon="slotProps">
-                        <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="cx('nextButtonIcon')" v-bind="ptm('nextButtonIcon')" />
+                        <slot name="nexticon">
-                    </slot>
+                            <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="[cx('nextButtonIcon'), slotProps.class]" v-bind="ptm('nextButton')['icon']" />
-                </button>
+                        </slot>
+                    </template>
+                </Button>
             </div>
             <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicators'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicators')">
                 <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
@@ -99,6 +102,7 @@
 </template>
 
 <script>
+import Button from 'primevue/button';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronLeftIcon from 'primevue/icons/chevronleft';
 import ChevronRightIcon from 'primevue/icons/chevronright';
@@ -637,6 +641,7 @@ export default {
         }
     },
     components: {
+        Button,
         ChevronRightIcon,
         ChevronDownIcon,
         ChevronLeftIcon,

components/lib/dialog/BaseDialog.vue

@@ -111,8 +111,24 @@ export default {
             default: undefined
         },
         closeButtonProps: {
-            type: null,
+            type: Object,
-            default: null
+            default: () => {
+                return {
+                    severity: 'secondary',
+                    text: true,
+                    rounded: true
+                };
+            }
+        },
+        maximizeButtonProps: {
+            type: Object,
+            default: () => {
+                return {
+                    severity: 'secondary',
+                    text: true,
+                    rounded: true
+                };
+            }
         },
         _instance: null
     },

components/lib/dialog/Dialog.d.ts

@@ -9,6 +9,7 @@
  */
 import { HTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ButtonPassThroughOptions, ButtonProps } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, HintedString, PassThrough } from '../ts-helpers';
 
@@ -42,6 +43,20 @@ export interface DialogPassThroughMethodOptions<T> {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface DialogSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: DialogProps;
+    /**
+     * Defines current inline state.
+     */
+    state: DialogState;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link DialogProps.pt}
@@ -64,21 +79,15 @@ export interface DialogPassThroughOptions<T = any> {
      */
     icons?: DialogPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the maximizable button's DOM element.
+     * Used to pass attributes to the maximizable Button component.
+     * @see {@link ButtonPassThroughOptions}
      */
-    maximizableButton?: DialogPassThroughOptionType<T>;
+    maximizableButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the maximizable icon's DOM element.
+     * Used to pass attributes to the close Button component.
+     * @see {@link ButtonPassThroughOptions}
      */
-    maximizableIcon?: DialogPassThroughOptionType<T>;
+    closeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the close button's component.
-     */
-    closeButton?: DialogPassThroughOptionType<T>;
-    /**
-     * Used to pass attributes to the close button icon's component.
-     */
-    closeButtonIcon?: DialogPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the content's DOM element.
      */
@@ -178,7 +187,7 @@ export interface DialogProps {
      */
     contentClass?: any;
     /**
-     * Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
+     * Used to pass all properties of the HTMLDivElement to the overlay Dialog inside the component.
      */
     contentProps?: HTMLAttributes | undefined;
     /**
@@ -279,6 +288,18 @@ export interface DialogProps {
      * @deprecated since v3.27.0. Use 'minimizeicon' slot.
      */
     minimizeIcon?: string | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', rounded: true, text: true }
+     */
+    closeButtonProps?: object | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', rounded: true, text: true }
+     */
+    maximizeButtonProps?: object | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

components/lib/dialog/Dialog.vue

@@ -10,38 +10,42 @@
                                 <span v-if="header" :id="ariaLabelledById" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
                             </slot>
                             <div :class="cx('icons')" v-bind="ptm('icons')">
-                                <button
+                                <Button
                                     v-if="maximizable"
                                     :ref="maximizableRef"
-                                    v-ripple
                                     :autofocus="focusableMax"
                                     :class="cx('maximizableButton')"
                                     @click="maximize"
-                                    type="button"
                                     :tabindex="maximizable ? '0' : '-1'"
-                                    v-bind="ptm('maximizableButton')"
+                                    :unstyled="unstyled"
+                                    v-bind="maximizeButtonProps"
+                                    :pt="ptm('maximizableButton')"
                                     data-pc-group-section="headericon"
                                 >
-                                    <slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
+                                    <template #icon="slotProps">
-                                        <component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableIcon')" />
+                                        <slot name="maximizeicon" :maximized="maximized" :class="cx('maximizableIcon')">
-                                    </slot>
+                                            <component :is="maximizeIconComponent" :class="[cx('maximizableIcon'), slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizableButton')['icon']" />
-                                </button>
+                                        </slot>
-                                <button
+                                    </template>
+                                </Button>
+                                <Button
                                     v-if="closable"
                                     :ref="closeButtonRef"
-                                    v-ripple
                                     :autofocus="focusableClose"
                                     :class="cx('closeButton')"
                                     @click="close"
                                     :aria-label="closeAriaLabel"
-                                    type="button"
+                                    :unstyled="unstyled"
-                                    v-bind="{ ...closeButtonProps, ...ptm('closeButton') }"
+                                    v-bind="closeButtonProps"
+                                    :pt="ptm('closeButton')"
                                     data-pc-group-section="headericon"
                                 >
-                                    <slot name="closeicon" :class="cx('closeButtonIcon')">
+                                    <template #icon="slotProps">
-                                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon]" v-bind="ptm('closeButtonIcon')"></component>
+                                        <slot name="closeicon" :class="cx('closeButtonIcon')">
-                                    </slot>
+                                            <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component>
-                                </button>
+                                        </slot>
+                                    </template>
+                                </Button>
                             </div>
                         </div>
                         <div :ref="contentRef" :class="[cx('content'), contentClass]" :style="contentStyle" v-bind="{ ...contentProps, ...ptm('content') }">
@@ -58,6 +62,7 @@
 </template>
 
 <script>
+import Button from 'primevue/button';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 import WindowMaximizeIcon from 'primevue/icons/windowmaximize';
@@ -258,10 +263,10 @@ export default {
             this.footerContainer = el;
         },
         maximizableRef(el) {
-            this.maximizableButton = el;
+            this.maximizableButton = el ? el.$el : undefined;
         },
         closeButtonRef(el) {
-            this.closeButton = el;
+            this.closeButton = el ? el.$el : undefined;
         },
         createStyle() {
             if (!this.styleElement && !this.isUnstyled) {
@@ -404,7 +409,8 @@ export default {
         focustrap: FocusTrap
     },
     components: {
-        Portal: Portal,
+        Button,
+        Portal,
         WindowMinimizeIcon,
         WindowMaximizeIcon,
         TimesIcon

components/lib/panel/BasePanel.vue

@@ -10,8 +10,14 @@ export default {
         toggleable: Boolean,
         collapsed: Boolean,
         toggleButtonProps: {
-            type: null,
+            type: Object,
-            default: null
+            default: () => {
+                return {
+                    severity: 'secondary',
+                    text: true,
+                    rounded: true
+                };
+            }
         }
     },
     style: PanelStyle,

components/lib/panel/Panel.d.ts

@@ -7,8 +7,9 @@
  * @module panel
  *
  */
-import { ButtonHTMLAttributes, TransitionProps, VNode } from 'vue';
+import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ButtonPassThroughOptions } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -46,6 +47,20 @@ export interface PanelPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface PanelSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: PanelProps;
+    /**
+     * Defines current inline state.
+     */
+    state: PanelState;
+}
+
 /**
  * Custom toggle event.
  * @see {@link PanelEmits.toggle}
@@ -83,13 +98,10 @@ export interface PanelPassThroughOptions {
      */
     icons?: PanelPassThroughOptionType;
     /**
-     * Used to pass attributes to the toggler's DOM element.
+     * Used to pass attributes to the toggler button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
      */
-    toggler?: PanelPassThroughOptionType;
+    toggler?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the togglericon's DOM element.
-     */
-    togglerIcon?: PanelPassThroughOptionType;
     /**
      * Used to pass attributes to the toggleablecontent's DOM element.
      */
@@ -151,9 +163,9 @@ export interface PanelProps {
     collapsed?: boolean;
     /**
      * Used to pass the custom value to read for the button inside the component.
-     * @deprecated since v3.26.0. Use 'pt' property instead.
+     * @defaultValue { severity: 'secondary', text: true, rounded: true }
      */
-    toggleButtonProps?: ButtonHTMLAttributes | undefined;
+    toggleButtonProps?: object | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

components/lib/panel/Panel.vue

@@ -6,24 +6,25 @@
             </slot>
             <div :class="cx('icons')" v-bind="ptm('icons')">
                 <slot name="icons"></slot>
-                <button
+                <Button
                     v-if="toggleable"
                     :id="id + '_header'"
-                    v-ripple
-                    type="button"
-                    role="button"
                     :class="cx('toggler')"
                     :aria-label="buttonAriaLabel"
                     :aria-controls="id + '_content'"
                     :aria-expanded="!d_collapsed"
+                    :unstyled="unstyled"
                     @click="toggle"
                     @keydown="onKeyDown"
-                    v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
+                    v-bind="toggleButtonProps"
+                    :pt="ptm('toggler')"
                 >
-                    <slot name="togglericon" :collapsed="d_collapsed">
+                    <template #icon="slotProps">
-                        <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" v-bind="ptm('togglericon')" />
+                        <slot name="togglericon" :collapsed="d_collapsed">
-                    </slot>
+                            <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggler')['icon']" />
-                </button>
+                        </slot>
+                    </template>
+                </Button>
             </div>
         </div>
         <transition name="p-toggleable-content" v-bind="ptm('transition')">
@@ -40,6 +41,7 @@
 </template>
 
 <script>
+import Button from 'primevue/button';
 import MinusIcon from 'primevue/icons/minus';
 import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
@@ -91,7 +93,8 @@ export default {
     },
     components: {
         PlusIcon,
-        MinusIcon
+        MinusIcon,
+        Button
     },
     directives: {
         ripple: Ripple

components/lib/scrolltop/BaseScrollTop.vue

@@ -21,6 +21,12 @@ export default {
         behavior: {
             type: String,
             default: 'smooth'
+        },
+        buttonProps: {
+            type: Object,
+            default: () => {
+                return { severity: 'secondary' };
+            }
         }
     },
     style: ScrollTopStyle,

components/lib/scrolltop/ScrollTop.d.ts

@@ -9,6 +9,7 @@
  */
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ButtonPassThroughOptions, ButtonProps } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -46,19 +47,35 @@ export interface ScrollTopPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface ScrollTopSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: ScrollTopProps;
+    /**
+     * Defines current inline state.
+     */
+    state: ScrollTopState;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link ScrollTopProps.pt}
  */
 export interface ScrollTopPassThroughOptions {
     /**
-     * Used to pass attributes to the root's DOM element.
+     * Used to pass attributes to the previous button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
      */
-    root?: ScrollTopPassThroughOptionType;
+    root?: ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the icon's DOM element.
+     * Used to pass attributes to the previous button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
      */
-    icon?: ScrollTopPassThroughOptionType;
+    button?: ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -112,6 +129,12 @@ export interface ScrollTopProps {
      * @defaultValue smooth
      */
     behavior?: string | undefined;
+    /**
+     * Used to pass all properties of the ButtonProps to the Button component.
+     * @type {ButtonProps}
+     * @defaultValue { severity: 'secondary', rounded: true }
+     */
+    buttonProps?: object | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */

components/lib/scrolltop/ScrollTop.vue

@@ -1,16 +1,20 @@
 <template>
     <transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave" v-bind="ptm('transition')">
-        <button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" type="button" :aria-label="scrollTopAriaLabel" v-bind="ptmi('root')">
+        <Button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" :aria-label="scrollTopAriaLabel" :unstyled="unstyled" v-bind="buttonProps" :pt="rootPTOptions()">
-            <slot name="icon" :class="cx('icon')">
+            <template #icon="slotProps">
-                <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
+                <slot name="icon" :class="cx('icon')">
-            </slot>
+                    <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon, slotProps.class]" v-bind="iconPTOptions" />
-        </button>
+                </slot>
+            </template>
+        </Button>
     </transition>
 </template>
 
 <script>
+import Button from 'primevue/button';
 import ChevronUpIcon from 'primevue/icons/chevronup';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
 import BaseScrollTop from './BaseScrollTop.vue';
 
 export default {
@@ -83,7 +87,13 @@ export default {
             ZIndexUtils.clear(el);
         },
         containerRef(el) {
-            this.container = el;
+            this.container = el ? el.$el : undefined;
+        },
+        rootPTOptions() {
+            return mergeProps(this.ptmi('root'), this.ptm('button'));
+        },
+        iconPTOptions() {
+            return mergeProps(this.ptmi('root')['icon'], this.ptm('button')['icon']);
         }
     },
     computed: {
@@ -92,7 +102,8 @@ export default {
         }
     },
     components: {
-        ChevronUpIcon
+        ChevronUpIcon,
+        Button
     }
 };
 </script>

components/lib/sidebar/BaseSidebar.vue

@@ -34,6 +34,12 @@ export default {
             type: Boolean,
             default: true
         },
+        closeButtonProps: {
+            type: Object,
+            default: () => {
+                return { severity: 'secondary', text: true, rounded: true };
+            }
+        },
         closeIcon: {
             type: String,
             default: undefined

components/lib/sidebar/Sidebar.d.ts

@@ -9,6 +9,7 @@
  */
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ButtonPassThroughOptions } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -46,6 +47,20 @@ export interface SidebarPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface SidebarSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: SidebarProps;
+    /**
+     * Defines current inline state.
+     */
+    state: SidebarState;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link SidebarProps.pt}
@@ -64,13 +79,10 @@ export interface SidebarPassThroughOptions {
      */
     title?: SidebarPassThroughOptionType;
     /**
-     * Used to pass attributes to the close button's DOM element.
+     * Used to pass attributes to the previous button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
      */
-    closeButton?: SidebarPassThroughOptionType;
+    toggler?: ButtonPassThroughOptions<SidebarSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the close icon's DOM element.
-     */
-    closeIcon?: SidebarPassThroughOptionType;
     /**
      * Used to pass attributes to the content's DOM element.
      */
@@ -146,6 +158,11 @@ export interface SidebarProps {
      * @defaultValue true
      */
     showCloseIcon?: boolean | undefined;
+    /**
+     * Used to pass the custom value to read for the button inside the component.
+     * @defaultValue { severity: 'secondary', text: true, rounded: true }
+     */
+    closeButtonProps?: object | undefined;
     /**
      * Icon to display in the sidebar close button.
      * @deprecated since v3.27.0. Use 'closeicon' slot.

components/lib/sidebar/Sidebar.vue

@@ -9,11 +9,24 @@
                             <slot name="header" :class="cx('title')">
                                 <div v-if="header" :class="cx('title')" v-bind="ptm('title')">{{ header }}</div>
                             </slot>
-                            <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')" data-pc-group-section="iconcontainer">
+                            <Button
-                                <slot name="closeicon" :class="cx('closeIcon')">
+                                v-if="showCloseIcon"
-                                    <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
+                                :ref="closeButtonRef"
-                                </slot>
+                                type="button"
-                            </button>
+                                :class="cx('closeButton')"
+                                :aria-label="closeAriaLabel"
+                                :unstyled="unstyled"
+                                @click="hide"
+                                v-bind="closeButtonProps"
+                                :pt="ptm('closeButton')"
+                                data-pc-group-section="iconcontainer"
+                            >
+                                <template #icon="slotProps">
+                                    <slot name="closeicon" :class="cx('closeIcon')">
+                                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component>
+                                    </slot>
+                                </template>
+                            </Button>
                         </div>
                         <div :ref="contentRef" :class="cx('content')" v-bind="ptm('content')">
                             <slot></slot>
@@ -26,6 +39,7 @@
 </template>
 
 <script>
+import Button from 'primevue/button';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 import Portal from 'primevue/portal';
@@ -155,7 +169,7 @@ export default {
             this.headerContainer = el;
         },
         closeButtonRef(el) {
-            this.closeButton = el;
+            this.closeButton = el ? el.$el : undefined;
         },
         bindDocumentKeyDownListener() {
             if (!this.documentKeydownListener) {
@@ -203,7 +217,8 @@ export default {
         ripple: Ripple
     },
     components: {
-        Portal: Portal,
+        Button,
+        Portal,
         TimesIcon
     }
 };

components/lib/themes/primeone/base/carousel/index.js

@@ -26,6 +26,11 @@ export default {
     flex-direction: row;
 }
 
+.p-carousel-prev-button,
+.p-carousel-next-button {
+    align-self: center;
+}
+
 .p-carousel-indicators {
     display: flex;
     flex-direction: row;

components/lib/themes/primeone/base/toast/index.js

@@ -55,7 +55,7 @@ export default {
     margin: -25% 0 0 0;
     right: -25%;
     padding: 0;
-    border: none
+    border: none;
     user-select: none;
 }
 

components/lib/toast/BaseToast.vue

@@ -47,8 +47,10 @@ export default {
             default: undefined
         },
         closeButtonProps: {
-            type: null,
+            type: Object,
-            default: null
+            default: () => {
+                return {};
+            }
         }
     },
     style: ToastStyle,

components/lib/toast/Toast.d.ts

@@ -7,8 +7,9 @@
  * @module toast
  *
  */
-import { ButtonHTMLAttributes, TransitionProps, VNode } from 'vue';
+import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ButtonPassThroughOptions } from '../button';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -46,6 +47,20 @@ export interface ToastPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface ToastSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: ToastProps;
+    /**
+     * Defines current inline state.
+     */
+    state: ToastState;
+}
+
 /**
  * Custom passthrough(pt) options.
  * @see {@link ToastProps.pt}
@@ -88,19 +103,17 @@ export interface ToastPassThroughOptions {
      */
     buttonContainer?: ToastPassThroughOptionType;
     /**
+     * /**
      * Used to pass attributes to the button's DOM element.
-     * @deprecated since v3.30.2. Use 'closeButton' option.
+     * @see {@link ButtonPassThroughOptions}
      */
-    button?: ToastPassThroughOptionType;
+    button?: ButtonPassThroughOptions<ToastSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the button's DOM element.
+     * /**
+     * Used to pass attributes to the close button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
      */
-    closeButton?: ToastPassThroughOptionType;
+    closeButton?: ButtonPassThroughOptions<ToastSharedPassThroughMethodOptions>;
-    /**
-     * Used to pass attributes to the button icon's DOM element.
-     * @deprecated since v3.30.2. Use 'closeIcon' option.
-     */
-    buttonIcon?: ToastPassThroughOptionType;
     /**
      * Used to pass attributes to the button icon's DOM element.
      */
@@ -242,10 +255,10 @@ export interface ToastProps {
      */
     successIcon?: string | undefined;
     /**
-     * Used to pass all properties of the HTMLButtonElement to the close button.
+     * Used to pass attributes to the close Button component.
-     * @deprecated since v3.26.0. Use 'pt' property.
+     * @defaultValue {}
      */
-    closeButtonProps?: ButtonHTMLAttributes | undefined;
+    closeButtonProps?: object | undefined;
     /**
      * Used to access message options.
      * @type {ToastMessageOptions}

components/lib/toast/ToastMessage.vue

@@ -11,9 +11,11 @@
             </template>
             <component v-else :is="templates.message" :message="message"></component>
             <div v-if="message.closable !== false" v-bind="ptm('buttonContainer')">
-                <button v-ripple :class="cx('closeButton')" type="button" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus v-bind="{ ...closeButtonProps, ...ptm('button'), ...ptm('closeButton') }">
+                <Button :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus :unstyled="unstyled" v-bind="closeButtonProps" :pt="{ ...ptm('button'), ...ptm('closeButton') }">
-                    <component :is="templates.closeicon || 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...ptm('buttonIcon'), ...ptm('closeIcon') }" />
+                    <template #icon="slotProps">
-                </button>
+                        <component :is="templates.closeicon || 'TimesIcon'" :class="[cx('closeIcon'), closeIcon, slotProps.class]" v-bind="{ ...ptm('buttonIcon')['icon'], ...ptm('closeIcon')['icon'] }" />
+                    </template>
+                </Button>
             </div>
         </div>
     </div>
@@ -21,6 +23,7 @@
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
+import Button from 'primevue/button';
 import CheckIcon from 'primevue/icons/check';
 import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
 import InfoCircleIcon from 'primevue/icons/infocircle';
@@ -107,6 +110,7 @@ export default {
         }
     },
     components: {
+        Button,
         TimesIcon: TimesIcon,
         InfoCircleIcon: InfoCircleIcon,
         CheckIcon: CheckIcon,

doc/common/apidoc/index.json

@@ -9455,6 +9455,29 @@
                     ],
                     "methods": []
                 },
+                "CarouselSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CarouselProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "CarouselState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": []
+                },
                 "CarouselPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
                     "relatedProp": "CarouselProps.pt",
@@ -9495,18 +9518,10 @@
                             "name": "previousButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "CarouselPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>",
                             "default": "",
                             "description": "Used to pass attributes to the previous button's DOM element."
                         },
-                        {
-                            "name": "previousButtonIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "CarouselPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the previous button icon's DOM element."
-                        },
                         {
                             "name": "itemsContent",
                             "optional": true,
@@ -9543,18 +9558,10 @@
                             "name": "nextButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "CarouselPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>",
                             "default": "",
                             "description": "Used to pass attributes to the next button's DOM element."
                         },
-                        {
-                            "name": "nextButtonIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "CarouselPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the next button icon's DOM element."
-                        },
                         {
                             "name": "indicators",
                             "optional": true,
@@ -9871,17 +9878,17 @@
                             "name": "prevButtonProps",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonHTMLAttributes",
+                            "type": "object",
                             "default": "",
-                            "description": "Used to pass all properties of the HTMLButtonElement to the previous navigation button."
+                            "description": "Used to pass attributes to the previous Button component."
                         },
                         {
                             "name": "nextButtonProps",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonHTMLAttributes",
+                            "type": "object",
                             "default": "",
-                            "description": "Used to pass all properties of the HTMLButtonElement to the next navigation button."
+                            "description": "Used to pass attributes to the next Button component."
                         },
                         {
                             "name": "dt",
@@ -22447,6 +22454,29 @@
                     ],
                     "methods": []
                 },
+                "DialogSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DialogProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "DialogState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": []
+                },
                 "DialogPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
                     "relatedProp": "DialogProps.pt",
@@ -22487,33 +22517,17 @@
                             "name": "maximizableButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "DialogPassThroughOptionType<T>",
+                            "type": "ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the maximizable button's DOM element."
+                            "description": "Used to pass attributes to the maximizable Button component."
-                        },
-                        {
-                            "name": "maximizableIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "DialogPassThroughOptionType<T>",
-                            "default": "",
-                            "description": "Used to pass attributes to the maximizable icon's DOM element."
                         },
                         {
                             "name": "closeButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "DialogPassThroughOptionType<T>",
+                            "type": "ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the close button's component."
+                            "description": "Used to pass attributes to the close Button component."
-                        },
-                        {
-                            "name": "closeButtonIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "DialogPassThroughOptionType<T>",
-                            "default": "",
-                            "description": "Used to pass attributes to the close button icon's component."
                         },
                         {
                             "name": "content",
@@ -22665,7 +22679,7 @@
                             "readonly": false,
                             "type": "HTMLAttributes",
                             "default": "",
-                            "description": "Used to pass all properties of the HTMLDivElement to the overlay panel inside the component."
+                            "description": "Used to pass all properties of the HTMLDivElement to the overlay Dialog inside the component."
                         },
                         {
                             "name": "rtl",
@@ -22830,6 +22844,22 @@
                             "description": "Icon to display in the dialog maximize button when dialog is minimized.",
                             "deprecated": "since v3.27.0. Use 'minimizeicon' slot."
                         },
+                        {
+                            "name": "closeButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the Button component."
+                        },
+                        {
+                            "name": "maximizeButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the Button component."
+                        },
                         {
                             "name": "dt",
                             "optional": true,
@@ -30049,14 +30079,6 @@
                             "default": "",
                             "description": "Used to pass attributes to the content's DOM element."
                         },
-                        {
-                            "name": "closeButton",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ButtonPassThroughOptions<InplaceSharedPassThroughMethodOptions>",
-                            "default": "",
-                            "description": "Used to pass attributes to the Button component."
-                        },
                         {
                             "name": "hooks",
                             "optional": true,
@@ -30100,14 +30122,6 @@
                     "description": "Defines valid properties in Inplace component.",
                     "relatedProp": "",
                     "props": [
-                        {
-                            "name": "closable",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "boolean",
-                            "default": "false",
-                            "description": "Displays a button to switch back to display mode."
-                        },
                         {
                             "name": "active",
                             "optional": true,
@@ -30141,14 +30155,6 @@
                             "default": "",
                             "description": "Used to pass all properties of the HTMLDivElement to display container."
                         },
-                        {
-                            "name": "closeButtonProps",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ButtonHTMLAttributes",
-                            "default": "",
-                            "description": "Used to pass all properties of the HTMLButtonElement to the close button."
-                        },
                         {
                             "name": "dt",
                             "optional": true,
@@ -30197,15 +30203,16 @@
                         },
                         {
                             "name": "content",
-                            "parameters": [],
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">closeCallback</span>: <span class=\"doc-option-parameter-type\">() &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Close message function.</span>\n}",
+                                    "description": "container slot's params."
+                                }
+                            ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom content template."
-                        },
-                        {
-                            "name": "closeicon",
-                            "parameters": [],
-                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
-                            "description": "Custom close icon template."
                         }
                     ]
                 },
@@ -41533,6 +41540,29 @@
                     ],
                     "methods": []
                 },
+                "PanelSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "PanelState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": []
+                },
                 "PanelToggleEvent": {
                     "description": "Custom toggle event.",
                     "relatedProp": "PanelEmits.toggle",
@@ -41596,17 +41626,9 @@
                             "name": "toggler",
                             "optional": true,
                             "readonly": false,
-                            "type": "PanelPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the toggler's DOM element."
+                            "description": "Used to pass attributes to the toggler button's DOM element."
-                        },
-                        {
-                            "name": "togglerIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "PanelPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the togglericon's DOM element."
                         },
                         {
                             "name": "toggleableContent",
@@ -41711,10 +41733,9 @@
                             "name": "toggleButtonProps",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonHTMLAttributes",
+                            "type": "object",
                             "default": "",
-                            "description": "Used to pass the custom value to read for the button inside the component.",
+                            "description": "Used to pass the custom value to read for the button inside the component."
-                            "deprecated": "since v3.26.0. Use 'pt' property instead."
                         },
                         {
                             "name": "dt",
@@ -46812,6 +46833,29 @@
                     ],
                     "methods": []
                 },
+                "ScrollTopSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ScrollTopProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ScrollTopState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ScrollTopPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
                     "relatedProp": "ScrollTopProps.pt",
@@ -46820,17 +46864,17 @@
                             "name": "root",
                             "optional": true,
                             "readonly": false,
-                            "type": "ScrollTopPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the root's DOM element."
+                            "description": "Used to pass attributes to the previous button's DOM element."
                         },
                         {
-                            "name": "icon",
+                            "name": "button",
                             "optional": true,
                             "readonly": false,
-                            "type": "ScrollTopPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<ScrollTopSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the icon's DOM element."
+                            "description": "Used to pass attributes to the previous button's DOM element."
                         },
                         {
                             "name": "hooks",
@@ -46916,6 +46960,14 @@
                             "default": "smooth",
                             "description": "Defines the scrolling behaviour, 'smooth' adds an animation and 'auto' scrolls with a jump."
                         },
+                        {
+                            "name": "buttonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass all properties of the ButtonProps to the Button component."
+                        },
                         {
                             "name": "dt",
                             "optional": true,
@@ -47584,6 +47636,29 @@
                     ],
                     "methods": []
                 },
+                "SidebarSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SidebarProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "SidebarState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": []
+                },
                 "SidebarPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
                     "relatedProp": "SidebarProps.pt",
@@ -47613,20 +47688,12 @@
                             "description": "Used to pass attributes to the header content's DOM element."
                         },
                         {
-                            "name": "closeButton",
+                            "name": "toggler",
                             "optional": true,
                             "readonly": false,
-                            "type": "SidebarPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<SidebarSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the close button's DOM element."
+                            "description": "Used to pass attributes to the previous button's DOM element."
-                        },
-                        {
-                            "name": "closeIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "SidebarPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the close icon's DOM element."
                         },
                         {
                             "name": "content",
@@ -47751,6 +47818,14 @@
                             "default": "true",
                             "description": "Whether to display a close icon inside the panel."
                         },
+                        {
+                            "name": "closeButtonProps",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Used to pass the custom value to read for the button inside the component."
+                        },
                         {
                             "name": "closeIcon",
                             "optional": true,
@@ -55412,6 +55487,29 @@
                     ],
                     "methods": []
                 },
+                "ToastSharedPassThroughMethodOptions": {
+                    "description": "Custom shared passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToastProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "ToastState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        }
+                    ],
+                    "methods": []
+                },
                 "ToastPassThroughOptions": {
                     "description": "Custom passthrough(pt) options.",
                     "relatedProp": "ToastProps.pt",
@@ -55492,27 +55590,17 @@
                             "name": "button",
                             "optional": true,
                             "readonly": false,
-                            "type": "ToastPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<ToastSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the button's DOM element.",
+                            "description": "/**\nUsed to pass attributes to the button's DOM element."
-                            "deprecated": "since v3.30.2. Use 'closeButton' option."
                         },
                         {
                             "name": "closeButton",
                             "optional": true,
                             "readonly": false,
-                            "type": "ToastPassThroughOptionType",
+                            "type": "ButtonPassThroughOptions<ToastSharedPassThroughMethodOptions>",
                             "default": "",
-                            "description": "Used to pass attributes to the button's DOM element."
+                            "description": "/**\nUsed to pass attributes to the close button's DOM element."
-                        },
-                        {
-                            "name": "buttonIcon",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "ToastPassThroughOptionType",
-                            "default": "",
-                            "description": "Used to pass attributes to the button icon's DOM element.",
-                            "deprecated": "since v3.30.2. Use 'closeIcon' option."
                         },
                         {
                             "name": "closeIcon",
@@ -55746,10 +55834,9 @@
                             "name": "closeButtonProps",
                             "optional": true,
                             "readonly": false,
-                            "type": "ButtonHTMLAttributes",
+                            "type": "object",
                             "default": "",
-                            "description": "Used to pass all properties of the HTMLButtonElement to the close button.",
+                            "description": "Used to pass attributes to the close Button component."
-                            "deprecated": "since v3.26.0. Use 'pt' property."
                         },
                         {
                             "name": "message",

doc/panel/TemplateDoc.vue

@@ -20,9 +20,7 @@
                 </div>
             </template>
             <template #icons>
-                <button class="p-panel-header-icon p-link mr-2" @click="toggle">
+                <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
-                    <span class="pi pi-cog"></span>
-                </button>
                 <Menu ref="menu" id="config_menu" :model="items" popup />
             </template>
             <p class="m-0">
@@ -74,9 +72,7 @@ export default {
         </div>
     </template>
     <template #icons>
-        <button class="p-panel-header-icon p-link mr-2" @click="toggle">
+        <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
-            <span class="pi pi-cog"></span>
-        </button>
         <Menu ref="menu" id="config_menu" :model="items" popup />
     </template>
     <p class="m-0">
@@ -106,9 +102,7 @@ export default {
                 </div>
             </template>
             <template #icons>
-                <button class="p-panel-header-icon p-link mr-2" @click="toggle">
+                <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
-                    <span class="pi pi-cog"></span>
-                </button>
                 <Menu ref="menu" id="config_menu" :model="items" popup />
             </template>
             <p class="m-0">
@@ -174,9 +168,7 @@ export default {
                 </div>
             </template>
             <template #icons>
-                <button class="p-panel-header-icon p-link mr-2" @click="toggle">
+                <Button icon="pi pi-cog" severity="secondary" rounded text @click="toggle" />
-                    <span class="pi pi-cog"></span>
-                </button>
                 <Menu ref="menu" id="config_menu" :model="items" popup />
             </template>
             <p class="m-0">

doc/scrolltop/ElementDoc.vue

@@ -16,9 +16,9 @@
                 :threshold="100"
                 icon="pi pi-arrow-up"
                 :pt="{
-                    root: 'w-2rem h-2rem border-round-sm bg-primary',
+                    button: {
-                    icon: {
+                        root: 'w-2rem h-2rem border-round-sm bg-primary',
-                        class: 'text-base w-1rem h-1rem'
+                        icon: 'text-base w-1rem h-1rem'
                     }
                 }"
             />
@@ -46,9 +46,9 @@ export default {
         :threshold="100"
         icon="pi pi-arrow-up"
         :pt="{
-            root: 'w-2rem h-2rem border-round-sm bg-primary',
+            button: {
-            icon: {
+                root: 'w-2rem h-2rem border-round-sm bg-primary',
-                class: 'text-base w-1rem h-1rem'
+                icon: 'text-base w-1rem h-1rem'
             }
         }"
     />
@@ -70,9 +70,9 @@ export default {
                 :threshold="100"
                 icon="pi pi-arrow-up"
                 :pt="{
-                    root: 'w-2rem h-2rem border-round-sm bg-primary',
+                    button: {
-                    icon: {
+                        root: 'w-2rem h-2rem border-round-sm bg-primary',
-                        class: 'text-base w-1rem h-1rem'
+                        icon: 'text-base w-1rem h-1rem'
                     }
                 }"
             />
@@ -96,9 +96,9 @@ export default {
                 :threshold="100"
                 icon="pi pi-arrow-up"
                 :pt="{
-                    root: 'w-2rem h-2rem border-round-sm bg-primary',
+                    button: {
-                    icon: {
+                        root: 'w-2rem h-2rem border-round-sm bg-primary',
-                        class: 'text-base w-1rem h-1rem'
+                        icon: 'text-base w-1rem h-1rem'
                     }
                 }"
             />