Toast

Toasts, referred to as “notifications” in the UI, are pop-up notifications that keep users informed by briefly:

• Confirming an action they took.
• Informing them about a timely event.
• Communicating the status of a process initiated.

The information in a toast is useful and relevant but never critical.

Examples

Default Toast

Toast with options

Confirmation Toasts

Communication Toasts

Progress Toasts

Custom component

Remove toasts

Remove queued toasts

ToastProvider

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 shown below.

For the Toasts to work properly, the <FluentToastProvider/> needs interactivity! If you are using "per page" interactivity, make sure to add a @rendermode to either the provider itself or the component the provider is placed in.

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

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

Documentation