MatBlazor - Material Design components for Blazor and Razor Components


Represents an instance of a Toast
It handles the user interactions and orchestrates the the state transitions

Name Type Description
Icon String
Message String
Options MatToastOptions
Title String


Toasts provide brief notifications or messages about app processes

Name Type Description
Class String Specifies one or more classnames for an DOM element.
RefBack ForwardRef
Style String Specifies an inline style for an DOM element.
Ref ElementRef Returned ElementRef reference for DOM element.


Dependency injection configuration

1. Startup.cs

Add using MatBlazor; and then in the ConfiguresServices method include services.AddMatToaster...

                using MatBlazor;

                services.AddMatToaster(config =>
                    config.PositionClass = MatToastPosition.TopRight;
                    config.PreventDuplicates = false;
                    config.NewestOnTop = true;
                    config.ShowCloseButton = true;

MatToasterContainter component

2. App.razor

The toast container must be added to the App.razor component or to another component always loaded in the application like MainLayout.razor. It is important to have exactly one instance of this component rendered in the application tree at any given time.

                <MatToastContainer />


3. Code

In a component:

                @inject IMatToaster Toaster

In a class:

                protected IMatToaster Toaster { get; set; }

Then call one of the display methods:

                Toaster.Add("Toast body text");
                Toaster.Add("Toast body text","Toast title", "code");



Toast transitions

General options

Toast options

If you like MatBlazor, please put a star on GitHub.