New *ButtonProps properties added - I

components/lib/toast/BaseToast.vue

@@ -47,8 +47,10 @@ export default {
             default: undefined
         },
         closeButtonProps: {
-            type: null,
-            default: null
+            type: Object,
+            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;
-    /**
-     * Used to pass attributes to the button icon's DOM element.
-     * @deprecated since v3.30.2. Use 'closeIcon' option.
-     */
-    buttonIcon?: ToastPassThroughOptionType;
+    closeButton?: ButtonPassThroughOptions<ToastSharedPassThroughMethodOptions>;
     /**
      * 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.
-     * @deprecated since v3.26.0. Use 'pt' property.
+     * Used to pass attributes to the close Button component.
+     * @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') }">
-                    <component :is="templates.closeicon || 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="{ ...ptm('buttonIcon'), ...ptm('closeIcon') }" />
-                </button>
+                <Button :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="onCloseClick" autofocus :unstyled="unstyled" v-bind="closeButtonProps" :pt="{ ...ptm('button'), ...ptm('closeButton') }">
+                    <template #icon="slotProps">
+                        <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,