Blazor Toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
Blazor Toasts are lightweight notifications designed to mimic the push notifications that mobile and desktop operating systems have popularized. They're built with a flexbox, making it easy to align and position.

Things to know when using the blazor toasts component#

  • Blazor Toasts will not hide automatically if you do not specify AutoHide="true".
  • Use global toasts service for the application instead of page level toasts.

Examples#

razor 
<Toasts class="p-3" Messages="messages" Placement="ToastsPlacement.TopRight" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowMessage(ToastType.Primary)">Primary Toast</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowMessage(ToastType.Secondary)">Secondary Toast</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowMessage(ToastType.Success)">Success Toast</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowMessage(ToastType.Danger)">Danger Toast</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowMessage(ToastType.Warning)">Warning Toast</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowMessage(ToastType.Info)">Info Toast</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowMessage(ToastType.Dark)">Dark Toast</Button>

@code {
    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType));

    private ToastMessage CreateToastMessage(ToastType toastType)
    => new ToastMessage
        {
            Type = toastType,
            Title = "Blazor Bootstrap",
            HelpText = $"{DateTime.Now}",
            Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}",
        };
}

Toast without title#

razor 
<Toasts class="p-3" Messages="messages" Placement="ToastsPlacement.TopRight" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowMessage(ToastType.Primary)">Primary Toast</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowMessage(ToastType.Secondary)">Secondary Toast</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowMessage(ToastType.Success)">Success Toast</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowMessage(ToastType.Danger)">Danger Toast</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowMessage(ToastType.Warning)">Warning Toast</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowMessage(ToastType.Info)">Info Toast</Button>
<Button Color="ButtonColor.Light" @onclick="() => ShowMessage(ToastType.Light)">Light Toast</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowMessage(ToastType.Dark)">Dark Toast</Button>

@code {
    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType));

    private ToastMessage CreateToastMessage(ToastType toastType)
    => new ToastMessage
        {
            Type = toastType,
            Message = $"Hello, world! This is a simple toast message. DateTime: {DateTime.Now}",
        };
}

Auto hide#

Add AutoHide="true" parameter to hide the Blazor Toasts after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.
razor 
<Toasts class="p-3" Messages="messages" AutoHide="true" Delay="6000" Placement="ToastsPlacement.TopRight" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowMessage(ToastType.Primary)">Primary Toast</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowMessage(ToastType.Secondary)">Secondary Toast</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowMessage(ToastType.Success)">Success Toast</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowMessage(ToastType.Danger)">Danger Toast</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowMessage(ToastType.Warning)">Warning Toast</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowMessage(ToastType.Info)">Info Toast</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowMessage(ToastType.Dark)">Dark Toast</Button>

@code {
    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType));

    private ToastMessage CreateToastMessage(ToastType toastType)
    => new ToastMessage
        {
            Type = toastType,
            Title = "Blazor Bootstrap",
            HelpText = $"{DateTime.Now}",
            Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}",
        };
}

Enable auto hide for individual messages#

Set AutoHide="true" property on ToastMessage to hide individual Blazor Toast message after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.
In the below example, AutoHide="false" for Danger and Warning messages.
razor 
<Toasts class="p-3" Messages="messages" Delay="6000" Placement="ToastsPlacement.TopRight" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowMessage(ToastType.Primary)">Primary Toast</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowMessage(ToastType.Secondary)">Secondary Toast</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowMessage(ToastType.Success)">Success Toast</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowMessage(ToastType.Danger)">Danger Toast</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowMessage(ToastType.Warning)">Warning Toast</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowMessage(ToastType.Info)">Info Toast</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowMessage(ToastType.Dark)">Dark Toast</Button>

@code {
    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType));

    private ToastMessage CreateToastMessage(ToastType toastType)
    {
        var toastMessage = new ToastMessage();

        toastMessage.Type = toastType;
        toastMessage.Title = "Blazor Bootstrap";
        toastMessage.HelpText = $"{DateTime.Now}";
        toastMessage.Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}";
        // disable auto hide for `danger` and `warning` messages.
        toastMessage.AutoHide = !(toastType == ToastType.Danger || toastType == ToastType.Warning);

        return toastMessage;
    }
}

Placement#

Change the Blazor Toasts placement according to your need. The default placement will be top right corner. Use the ToastsPlacement parameter to update the Blazor Toasts placement.
razor 
<Toasts class="p-3" Messages="messages" Placement="@toastsPlacement" />

<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.TopLeft)">Top Left</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.TopCenter)">Top Center</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.TopRight)">Top Right</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.MiddleLeft)">Middle Left</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.MiddleCenter)">Middle Center</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.MiddleRight)">Middle Right</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.BottomLeft)">Bottom Left</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.BottomCenter)">Bottom Center</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ChangePlacement(ToastsPlacement.BottomRight)">Bottom Right</Button>

@code {
    ToastsPlacement toastsPlacement = ToastsPlacement.TopRight;
    List<ToastMessage> messages = new();

    private void ChangePlacement(ToastsPlacement placement)
    {
        if (!messages.Any())
        {
            messages.Add(
                new ToastMessage()
                    {
                        Type = ToastType.Success,
                        Title = "Blazor Bootstrap",
                        HelpText = $"{DateTime.Now}",
                        Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}",
                    });
        }
        toastsPlacement = placement;
    }
}

Stack Length#

Blazor Toasts component shows a maximum of 5 toasts by default. If you add a new toast to the existing list, the first toast gets deleted like FIFO (First In First Out). Change the maximum capacity according to your need by using the StackLength parameter.
In the below example, StackLength is set to 3. It shows a maximum of 3 toast messages at any time.
razor 
<Toasts class="p-3" Messages="messages" AutoHide="true" StackLength="3" Placement="ToastsPlacement.TopRight" />

<Button Color="ButtonColor.Primary" @onclick="() => ShowMessage(ToastType.Primary)">Primary Toast</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowMessage(ToastType.Secondary)">Secondary Toast</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowMessage(ToastType.Success)">Success Toast</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowMessage(ToastType.Danger)">Danger Toast</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowMessage(ToastType.Warning)">Warning Toast</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowMessage(ToastType.Info)">Info Toast</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowMessage(ToastType.Dark)">Dark Toast</Button>

@code {
    List<ToastMessage> messages = new List<ToastMessage>();

    private void ShowMessage(ToastType toastType) => messages.Add(CreateToastMessage(toastType));

    private ToastMessage CreateToastMessage(ToastType toastType)
    => new ToastMessage
        {
            Type = toastType,
            Title = "Blazor Bootstrap",
            HelpText = $"{DateTime.Now}",
            Message = $"Hello, world! This is a toast message. DateTime: {DateTime.Now}",
        };
}

Global toasts service for the application#

1. Add the Toasts component in MainLayout.razor page as shown below.
razor 
@inherits LayoutComponentBase

...

... MainLayour.razor code goes here ...

...

<Toasts class="p-3" AutoHide="true" Delay="4000" Placement="ToastsPlacement.TopRight" />
TIP
Set the Toasts component parameters as per your requirement.
2. Inject ToastService, then call the Notify(...) method as shown below.
razor 
@code {

    [Inject] protected ToastService ToastService { get; set; } = default!;

    private void SaveEmployee()
    {
        try
        {
            // TODO: call the service/api to save the employee details

            ToastService.Notify(new(ToastType.Success, $"Employee details saved successfully."));
        }
        catch(Exception ex)
        {
            // handle exception

            ToastService.Notify(new(ToastType.Danger, $"Error: {ex.Message}."));
        }
    }
}
Blazor Bootstrap Blazor Bootstrap
Links
Guides
Community