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

Message heading
We inform you about service changes.

Success

Message heading
We inform you about service changes.

Warning

Message heading
We inform you about service changes.

Error

Message heading
We inform you about service changes.

Example in Context

Toast notifications are positioned based on the platform to ensure optimal visibility without interfering with core content or user interactions. On desktop: the default placement is in the top-right corner of the screen.

Info

Success

Warning

Error

csharp 
SnackbarService.Enqueue(new SnackbarOptions
{
    Title = "Message heading",
    Message = "We inform you about service changes.",
    Variant = SnackbarVariant.Info,
    Closable = true,
    Placement = SnackbarPlacement.TopEnd,
    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.

w/ heading

Message heading
We inform you about service changes.

w/ heading: link

Message heading
We inform you about service changes.

w/ heading: close-none

Message heading
We inform you about service changes.

heading-none

We inform you about service changes.

heading-none: link

We inform you about service changes.

heading-none: close-none

We inform you about service changes.

Interactive Example

Click the buttons below to preview how toast notifications appear in the top-right corner.

w/ heading

w/ heading: link

heading-none

heading-none: link

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

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

Placement

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

Desktop — default placement

On desktop, the toast appears in the top-right corner of the screen.

Mobile — default placement

On mobile, the toast appears at the bottom of the screen, above any persistent navigation or system UI.

csharp 
// Desktop: top-right corner (TopEnd)
SnackbarService.Enqueue(new SnackbarOptions
{
    Message = "Toast at top-right",
    Variant = SnackbarVariant.Info,
    Placement = SnackbarPlacement.TopEnd,
    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.