ToastService

The ToastService is a service that can be used to show toasts. It can be injected into a page and used to show different type of toasts.

For a component to be useable by the ToastService, it needs to implement IToastContentComponent<T> where T represent the type of the data to be shown in the toast.

The ToastService is automatically registered in the DI container with the AddFluentUIComponents() call.

Toast container

Toasts are rendered through the <FluentToastProvider /> component. This component needs to be added to the main layout of your application/site. You typically do this in the MainLayout.razor file at the end of the <main> section like this:

<main>
    <nav>
        <!-- -->
    </nav>
    <div class="content">
        <article id="article">
            @Body
        </article>
    </div>
    <FluentToastProvider MaxToastCount="10" />
</main>

IMPORTANT!!

For the <FluentToastProvider/> to work properly, it needs interactivity! If you are using "per page" interactivity or ASP.NET Core 8 or above with Server Side Rendering , make sure to add a @rendermode to either the provider itself or the component the provider is placed in.

See the documentation below for more information about the FluentToastProvider parameters.

Examples

See the toast page for examples of the different types of available toasts:

• Confirmation toast
• Communication toast
• Progress toast

Documentation