Sonner

Toast notifications powered by the Sonner service. Place the <Sonner /> component once in your layout and use the injected ISonnerService to trigger toasts from anywhere.

Basic

Trigger a toast notification from anywhere via DI.

@inject ISonnerService SonnerService

<Sonner />

<Button OnClick="ShowDefault">Show toast</Button>
<Button Variant="ButtonVariant.Outline" OnClick="ShowDestructive">Destructive</Button>

@code {
    private void ShowDefault(MouseEventArgs _)
    {
        SonnerService.Show("Scheduled", "Friday, February 10 at 5:57 PM.");
    }

    private void ShowDestructive(MouseEventArgs _)
    {
        SonnerService.Show("Uh oh!", "Something went wrong.", SonnerToastVariant.Destructive);
    }
}

Persistent

Set duration to 0 to keep a toast visible until dismissed.

<Sonner />

<Button OnClick="ShowPersistent">Show persistent</Button>

@code {
    private void ShowPersistent(MouseEventArgs _)
    {
        SonnerService.Show("Uploading...", "This toast will stay until dismissed.", duration: 0);
    }
}

Position

Configure where toasts appear on screen. The default is bottom-right.

<Sonner Position="SonnerPosition.TopRight" />

@* Available positions: *@
@* SonnerPosition.TopLeft *@
@* SonnerPosition.TopCenter *@
@* SonnerPosition.TopRight *@
@* SonnerPosition.BottomLeft *@
@* SonnerPosition.BottomCenter *@
@* SonnerPosition.BottomRight (default) *@

Max Visible

Configure how many toasts are fully visible before stacking. Default is 3.

<Sonner MaxVisible="5" />

@* Show up to 5 toasts fully before stacking begins. *@
@* Default is 3. Minimum 1. *@