Toast Message

Toast messages are used to inform users of system status, completed actions, errors, or other relevant events. They appear in the corner of the screen (typically top-right) and are designed to be non-intrusive, allowing users to continue their current task without interruption.

Styles

Each type of toast conveys a specific message through its style and context. The available options are info, success, warning, and error. Icons are always included to reinforce the message type.

Info

Success

Warning

Error

csharp

SnackbarService.Enqueue(new SnackbarOptions
{
    Title = "Info",
    Message = "Message with title and close",
    Variant = SnackbarVariant.Info,
    Closable = true,
    DurationMs = 5000
});

Info Variations

Toast messages can appear in a variety of formats depending on the context and user needs. They may include an optional heading to provide a clear title or summary, or appear without a heading for a more compact message. Toasts can also feature interactive elements, such as embedded links that allow users to take immediate action. Additionally, they may include or omit a close (dismiss) button based on their level of urgency, duration, or whether they include an auto-dismiss behavior.

Title + Close

Info (title + close)

No Title + Close

Info (no title + close)

No Title, No Close

Info (no title, no close)

With Action Link

Info (title + link + close)

csharp

// With title and close button
SnackbarService.Enqueue(new SnackbarOptions
{
    Title = "Info",
    Message = "Message with title and close",
    Variant = SnackbarVariant.Info,
    Closable = true
});

// With action link
SnackbarService.Enqueue(new SnackbarOptions
{
    Title = "Info",
    Message = "Message with link",
    Variant = SnackbarVariant.Info,
    ActionLabel = "View details",
    OnAction = () => Console.WriteLine("Link clicked")
});

Success Variations

Success snackbars for positive feedback and confirmations.

Success (title + close)

Success (no title + close)

Success (no title, no close)

Success (title + link + close)

Warning Variations

Warning snackbars for cautionary messages.

Warning (title + close)

Warning (no title + close)

Warning (no title, no close)

Warning (title + link + close)

Error Variations

Error snackbars for critical messages and failures.

Error (title + close)

Error (no title + close)

Error (no title, no close)

Error (title + link + close)

Current State

Monitor and control snackbar queue state.

Visible Snackbars

Max Concurrent

Pause All

Resume All

Dismiss All

Placement

Toast notifications are positioned based on the platform to ensure optimal visibility without interfering with core content or user interactions.

Top Start

Top Center

Top End

Bottom Start

Bottom Center

Bottom End

csharp

SnackbarService.Enqueue(new SnackbarOptions
{
    Message = "Snackbar at TopEnd",
    Variant = SnackbarVariant.Info,
    Placement = SnackbarPlacement.TopEnd,
    DurationMs = 3000
});

Queue Management

Snackbars queue automatically when MaxConcurrent is reached.

Shows 5 snackbars (queued)

Show 5 Snackbars

csharp

for (int i = 1; i <= 5; i++)
{
    SnackbarService.Enqueue($"Snackbar #{i}", SnackbarVariant.Info);
}

Keyed Toasts

Assign a unique key to prevent duplicate toast messages.

First click shows snackbar

Save Progress (Keyed)

Same key - updates existing

Save Again (Same Key)

csharp

SnackbarService.Enqueue(new SnackbarOptions
{
    Message = $"Progress saved at {DateTime.Now:HH:mm:ss}",
    Variant = SnackbarVariant.Success,
    Key = "save-progress",  // Prevents duplicates with same key
    DurationMs = 3000
});

Usage

How to set up and use Toast Messages in your application.

1. Register Services

csharp

// Program.cs
builder.Services.AddFod();

2. Wrap App with FodSnackbarProvider

razor

<FodProviders>
    <Router AppAssembly="@typeof(App).Assembly">
        ...
    </Router>
</FodProviders>

3. Inject ISnackbarService

csharp

@inject ISnackbarService SnackbarService

// Simple usage
SnackbarService.Enqueue("Operation successful", SnackbarVariant.Success);

// With title
SnackbarService.Enqueue(new SnackbarOptions
{
    Title = "Success",
    Message = "Message with title and close",
    Variant = SnackbarVariant.Success,
    Closable = true
});

// With action link
SnackbarService.Enqueue(new SnackbarOptions
{
    Title = "Info",
    Message = "Message with link",
    Variant = SnackbarVariant.Info,
    ActionLabel = "View details",
    OnAction = () => Console.WriteLine("Link clicked")
});

API Reference

ISnackbarService methods and SnackbarOptions properties.

ISnackbarService Methods

No properties defined.

SnackbarOptions Properties

No properties defined.