[Feature]: Toast: Support immediately removing a toast

[WanderG]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

When dismissing a toast, an animation is used, making it slow to dismiss multiple toasts. We would like to be able to more quickly close a few toasts.

I have found a workaround that cannot be used in production, as the types do not support it, and presumable only happens to work by accident. But it demonstrates what I want:
https://stackblitz.com/edit/jcm3kt-k6affw?file=src%2Fexample.tsx

I can see a few possible solutions:

1. Allow customizing/removing the animation
2. Update the ToastChangeData type to support the remove method (as used in the example)
3. Add options to the dismissToast function returned by useToastController, to allow immediately removing the toast

Of these 3 options (but I'm sure there are more), I'd prefer the 3rd, as it would allow me to only immediately remove the toast on user-interaction, while keeping the animation when a toast is removed after a timeout.

Have you discussed this feature with our team

No response

Additional context

No response

Validations

• [X] Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

Normal

[miroslavstastny]

We should add motion slot to Toast component.

[Saamy88]

Any updates on this issue?

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[WanderG]

keep open