Using a Toast like UI widget in Fluent UI

Question

I have been using Fluent UI to implement the UI for an Excel add-in that I'm working on. I need a way to display a series of pop up notifications that do not require user input, but just serve to notify the user that something happened. What I want is to use something like the Callout widget, that nicely stack on top of each other.

An example of what I am looking for: https://react-bootstrap.github.io/components/toasts/

I don't see any widget like that, and was wondering if it is possible to be able to implement the same in Fluent UI, so that I can preserve the look and feel with the rest of the UI widgets my add-in has. If that is not possible, I have no choice but to use a third party library, and then tweak it's look and feel to match that of Fluent UI.

What is the recommended way to go about this?

Derick

Fluent UI doesn't offer it. So a solution depends on your personal choice (I guess that's why someone downvoted your question). I'd personally use a Layer (developer.microsoft.com/en-us/fluentui#/controls/web/layer) and render custom toasts using other Fluent UI components in there myself. The stacking can simply be achieved by using flex box or Fluent UI's Stack component (developer.microsoft.com/en-us/fluentui#/controls/web/stack). – Tired

Thanks for the suggestions @alex3683! Yeah, was currently using Toastr with custom CSS to match the look and feel of Fluent UI. I will look into using Callouts with the Stack component to see if the same effect can be reproduced. – Derick

Hm, I don't think that callouts are stackable, since they have their own layer and are positioned absolute or fixed or something. It should not be that difficult to just take standard div or Stack elements, make them nicer with the elevation / depth styles (developer.microsoft.com/en-us/fluentui#/styles/web/elevation) and add an IconButton for the closing action. – Tired

Ah, I see. Yeah, thanks for the suggestions! Will try this and then customize as needed. :) – Derick