Toast Provider - LumexUI

This component is a wrapper around Blazor Sonner .

Prerequisite

The LumexToastProvider must be added to the application before using the toast service. This is required to initialize the context for managing toasts.

MainLayout.razor

<LumexToastProvider @rendermode="@InteractiveWebAssembly" />

Usage

Customize the type of toast to render, and pass options as the second argument.

@using Blazor.Sonner.Services

@inject ToastService Toast

<div class="flex flex-wrap gap-2">
    <LumexButton Variant="@Variant.Flat" OnClick="@ShowDefaultToast">Default</LumexButton>
    <LumexButton Variant="@Variant.Flat" OnClick="@ShowDescriptionToast">Description</LumexButton>
    <LumexButton Variant="@Variant.Flat" OnClick="@ShowInfoToast">Info</LumexButton>
    <LumexButton Variant="@Variant.Flat" OnClick="@ShowSuccessToast">Success</LumexButton>
    <LumexButton Variant="@Variant.Flat" OnClick="@ShowWarningToast">Warning</LumexButton>
    <LumexButton Variant="@Variant.Flat" OnClick="@ShowErrorToast">Error</LumexButton>
    <LumexButton Variant="@Variant.Flat" OnClick="@ShowAsyncToast">Async</LumexButton>
</div>

@code {
    private void ShowDefaultToast() => Toast.Show( "Event has been created" );
    private void ShowDescriptionToast()
    {
        Toast.Show( "Event has been created", t =>
        {
            t.Description = "Monday, January 3rd at 6:00pm";
        } );
    }
    private void ShowInfoToast() => Toast.Info( "Be at the area 10 minutes before the event time" );
    private void ShowSuccessToast() => Toast.Success( "Event has been created" );
    private void ShowWarningToast() => Toast.Warning( "Event start time cannot be earlier than 8am" );
    private void ShowErrorToast() => Toast.Error( "Event has not been created" );
    private void ShowAsyncToast()
    {
        Toast.Async( DoAsync(), t =>
        {
            t.Loading = "Loading...";
            t.Success = ( data ) => $"{data} toast has been added";
            t.Error = ( ex ) => ex.Message;
        } );

        async Task<string> DoAsync()
        {
            // Simulate an async operation
            await Task.Delay( 2000 );
            return "Blazor Sonner";
        }
    }
}

Position

Use Position parameter on LumexToastProvider to define where toasts appear. Toast position can also be set individually via options.

@using Blazor.Sonner.Services
@using System.Text.RegularExpressions

@inject ToastService Toast

<div class="fixed z-100">
    <LumexToastProvider Id="toaster-position" Position="@_selectedPosition" />
</div>

<div class="flex flex-wrap gap-2">
    @foreach( var position in _positions )
    {
        <LumexButton Variant="@Variant.Flat" OnClick="@(() => ShowToast( position ))">
            @Regex.Replace( position.ToString(), "(?<!^)(?=[A-Z])", " " )
        </LumexButton>
    }
</div>

@code {
    private ToastPosition _selectedPosition = ToastPosition.BottomRight;

    private ToastPosition[] _positions = [
        ToastPosition.TopLeft,
        ToastPosition.TopCenter,
        ToastPosition.TopRight,
        ToastPosition.BottomLeft,
        ToastPosition.BottomCenter,
        ToastPosition.BottomRight
    ];

    private void ShowToast( ToastPosition position )
    {
        _selectedPosition = position;

        Toast.Show( "Event has been created", t =>
        {
            t.ToasterId = "toaster-position";
            t.Description = "Monday, January 3rd at 6:00pm";
        } );
    }
}

Expand

Use Expand parameter on LumexToastProvider to make toasts expanded by default.

@using Blazor.Sonner.Services

@inject ToastService Toast

<div class="fixed z-100">
    <LumexToastProvider Id="toaster-expanded" Expand="@_toasterExpanded" />
</div>

<div class="flex flex-wrap gap-2">
    <LumexButton Variant="@Variant.Flat" OnClick="@(() => ShowToast( expanded: false ))">
        Default
    </LumexButton>
    <LumexButton Variant="@Variant.Flat" OnClick="@(() => ShowToast( expanded: true ))">
        Expanded
    </LumexButton>
</div>

@code {
    private bool _toasterExpanded;

    private void ShowToast( bool expanded )
    {
        _toasterExpanded = expanded;

        Toast.Show( "Event has been created", t =>
        {
            t.ToasterId = "toaster-expanded";
            t.Description = "Monday, January 3rd at 6:00pm";
        } );
    }
}

Close button

Use CloseButton parameter on LumexToastProvider to show a close button in a toast.

@using Blazor.Sonner.Services

@inject ToastService Toast

<div class="fixed z-100">
    <LumexToastProvider Id="toaster-close-button" CloseButton="@_closeButtonEnabled" />
</div>

<div class="flex flex-wrap gap-2">
    <LumexButton Variant="@Variant.Flat" OnClick="@(() => ShowToast( enabled: false ))">
        Default
    </LumexButton>
    <LumexButton Variant="@Variant.Flat" OnClick="@(() => ShowToast( enabled: true ))">
        Close Button
    </LumexButton>
</div>

@code {
    private bool _closeButtonEnabled;

    private void ShowToast( bool enabled )
    {
        _closeButtonEnabled = enabled;

        Toast.Show( "Event has been created", t =>
        {
            t.ToasterId = "toaster-close-button";
            t.Description = "Monday, January 3rd at 6:00pm";
        } );
    }
}

Rich colors

Use RichColors parameter on LumexToastProvider to colorize toasts by semantic intent.

@using Blazor.Sonner.Services

@inject ToastService Toast

<div class="fixed z-100">
    <LumexToastProvider Id="toaster-rich-colors" RichColors="@true" />
</div>

<div class="flex flex-wrap gap-2">
    <LumexButton Variant="@Variant.Flat"
                 Color="@ThemeColor.Info"
                 OnClick="@(() => Toast.Info( "Be at the area 10 minutes before the event time", _toasterId ))">
        Info
    </LumexButton>

    <LumexButton Variant="@Variant.Flat"
                 Color="@ThemeColor.Success"
                 OnClick="@(() => Toast.Success( "Event has been created", _toasterId ))">
        Success
    </LumexButton>

    <LumexButton Variant="@Variant.Flat"
                 Color="@ThemeColor.Warning"
                 OnClick="@(() => Toast.Warning( "Event start time cannot be earlier than 8am", _toasterId ))">
        Warning
    </LumexButton>

    <LumexButton Variant="@Variant.Flat"
                 Color="@ThemeColor.Danger"
                 OnClick="@(() => Toast.Error( "Event has not been created", _toasterId ))">
        Error
    </LumexButton>
</div>

@code {
    private Action<ToastModel> _toasterId = t => t.ToasterId = "toaster-rich-colors";
}

Other

Use Gap, Duration, VisibleToasts, and other parameters on LumexToastProvider to further customize toasts.

Gap

Duration

Visible toasts

@using Blazor.Sonner.Services

@inject ToastService Toast

<div class="fixed z-100">
    <LumexToastProvider Id="toaster-other"
                        Gap="@_gap"
                        Duration="@TimeSpan.FromMilliseconds( _duration )"
                        VisibleToasts="@_visibleToasts" />
</div>

<div class="w-full grid items-center justify-items-center gap-4 md:grid-cols-2">
    <div>
        <LumexButton Variant="@Variant.Flat"
                     OnClick="@(() => Toast.Show( "Event has been created", _toasterId ))">
            Show toast
        </LumexButton>
    </div>

    <div class="flex flex-col gap-4">
        <LumexNumbox Label="Gap" LabelPlacement="@LabelPlacement.Outside" step="2" @bind-Value="@_gap" />
        <LumexNumbox Label="Duration" LabelPlacement="@LabelPlacement.Outside" step="500" @bind-Value="@_duration" />
        <LumexNumbox Label="Visible toasts" LabelPlacement="@LabelPlacement.Outside" @bind-Value="@_visibleToasts" />
    </div>
</div>

@code {
    private Action<ToastModel> _toasterId = t => t.ToasterId = "toaster-other";

    private int _gap = 14;
    private int _visibleToasts = 3;
    private double _duration = 4000;
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

<LumexToastProvider />

On this page