Live Example



    <MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@(() => Snackbar.Add("Hello, world! This is a toast message."))">
        Show live toast
    </MudButton>

    

Basic Example

<MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@(() => Snackbar.Add("Hello, world! This is a toast message."))">
    Open snackbar              
    </MudButton>

Custom Action Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@Show"> Open Action Snackbar </MudButton>
   
    @code {
        private void Show()
        {

            Snackbar.Add("Hello, world! This is a toast message.", Severity.Normal, config =<
            {
                config.Action = "Take Action";
                config.ActionColor = Color.Primary;

            });
        }
    }

Color Schemes

Hello, world! This is the Warning toast message.
Hello, world! This is the Error toast message.
Hello, world! This is the Info toast message.
<MudAlert Severity="Severity.Warning" Dense="true" Class="rounded-0 rounded-t">Hello, world! This is the Warning toast message.</MudAlert>
    <MudAlert Severity="Severity.Error" Dense="true" Class="rounded-0">Hello, world! This is the Error toast message.</MudAlert>
    <MudAlert Severity="Severity.Info" Dense="true" Class="rounded-0 rounded-b">Hello, world! This is the Info toast message.</MudAlert>

RenderFragment Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@OnClick">Show a RenderFragment snackbar</MudButton>
@code {
    private void OnClick()
    {
        SnackbarService.Add
        (
            <div>
            <div class="d-flex"> 
                <img class="bd-placeholder-img rounded me-2" src="../assets/images/brand-logos/favicon.ico" alt="..."> 
                <strong class="me-auto">Ynex</strong> 
                <small class="text-muted">just now</small> 
            </div>
            <p class="fs-14 fw-semibold"> Hello, world! This is a toast message. </p>
            </div>
        );
    }
}

Clickable Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@Show3">
        Open clickable snackbar
    </MudButton>

    @code {
        void Show3()
            {
                Snackbar.Add("I got a message for you", Severity.Normal, config =>
                {
                    config.OnClick = snackbar =>
                    {
                        SayHello();
                        return Task.CompletedTask;
                    };
                });
            }

            public void SayHello()
            {
                Snackbar.Add("Hello World!");
            }
    }

Snackbar Variants

<MudButton @onclick="@(() => ShowVariant("Text Snackbar", Variant.Text))" Variant="Variant.Filled" Color="Color.Primary">Open text</MudButton>
    <MudButton @onclick="@(() => ShowVariant("Filled Snackbar", Variant.Filled))" Variant="Variant.Filled" Color="Color.Secondary">Open filled</MudButton>
    <MudButton @onclick="@(() => ShowVariant("Outlined Snackbar", Variant.Outlined))" Variant="Variant.Filled" Color="Color.Tertiary">Open outlined</MudButton>

    @code {
        void ShowVariant(string message, Variant variant)
        {
            Snackbar.Configuration.MaxDisplayedSnackbars = 10;
            Snackbar.Add($"Normal {message}", Severity.Normal, c => c.SnackbarVariant = variant);
            Snackbar.Add($"Info {message}", Severity.Info, c => c.SnackbarVariant = variant);
            Snackbar.Add($"Success {message}", Severity.Success, c => c.SnackbarVariant = variant);
            Snackbar.Add($"Warning {message}", Severity.Warning, c => c.SnackbarVariant = variant);
            Snackbar.Add($"Error {message}", Severity.Error, c => c.SnackbarVariant = variant);
        }
    }

Solid Background Snackbar

<div class="btn-list">
    <MudButton Variant="Variant.Filled" Color="Color.Primary" @onclick="@(() => Snackbar.Add("The reactor type is RBMK-1000", Severity.Normal))">Primary</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Secondary" @onclick="@(() => Snackbar.Add("The reactor was fired up successfully", Severity.Info))">Secondary</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Success" @onclick="@(() => Snackbar.Add("The reactor is running at optimum temperature", Severity.Success))">Success</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Warning" @onclick="@(() => Snackbar.Add("The reactor temperature exceeds the optimal range", Severity.Warning))">Warning</MudButton>
    <MudButton Variant="Variant.Filled" Color="Color.Error" @onclick="@(() => Snackbar.Add("Reactor meltdown is imminent", Severity.Error))">Danger</MudButton>
</div>

Snackbar Position

<div class="btn-list">
    <MudButton @onclick="@(() => ChangePosition("Top-Start", Defaults.Classes.Position.TopStart))" Variant="Variant.Outlined" Color="Color.Primary">Top-Start</MudButton>
    <MudButton @onclick="@(() => ChangePosition("Top-Left", Defaults.Classes.Position.TopLeft))" Variant="Variant.Outlined" Color="Color.Primary" >Top-Left</MudButton>
    <MudButton @onclick="@(() => ChangePosition("Top-Center", Defaults.Classes.Position.TopCenter))" Variant="Variant.Outlined" Color="Color.Primary" >Top-Center</MudButton>
    <MudButton @onclick="@(() => ChangePosition("Top-Right", Defaults.Classes.Position.TopRight))" Variant="Variant.Outlined" Color="Color.Primary" >Top-Right</MudButton>
    <MudButton @onclick="@(() => ChangePosition("Top-End", Defaults.Classes.Position.TopEnd))" Variant="Variant.Outlined" Color="Color.Primary" >Top-End</MudButton>
    <MudButton @onclick="@(() => ChangePosition("Bottom-Start", Defaults.Classes.Position.BottomStart))" Variant="Variant.Outlined" Color="Color.Primary" >Bottom-Start</MudButton>
    <MudButton @onclick="@(() => ChangePosition("Bottom-Left", Defaults.Classes.Position.BottomLeft))" Variant="Variant.Outlined" Color="Color.Primary" >Bottom-Left</MudButton>
    <MudButton @onclick="@(() => ChangePosition("Bottom-Center", Defaults.Classes.Position.BottomCenter))" Variant="Variant.Outlined" Color="Color.Primary" >Bottom-Center</MudButton>
    <MudButton @onclick="@(() => ChangePosition("Bottom-Right", Defaults.Classes.Position.BottomRight))" Variant="Variant.Outlined" Color="Color.Primary" >Bottom-Right</MudButton>
    <MudButton @onclick="@(() => ChangePosition("Bottom-End", Defaults.Classes.Position.BottomEnd))" Variant="Variant.Outlined" Color="Color.Primary" >Bottom-End</MudButton>
</div>


    @code {
        void ChangePosition(string message, string position)
        {
            Snackbar.Clear();
            Snackbar.Configuration.PositionClass = position;
            Snackbar.Add(message, Severity.Normal);
        }
    }

Open & Hide Snackbar

<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@Show2">
    Open snackbar
</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Error" OnClick="@Hide">
    Hide snackbar
</MudButton>


@code {
    private const string Key = "Same";

    void Show2()
    {
        var config = (SnackbarOptions options) =>
        {
            options.VisibleStateDuration = int.MaxValue;
            options.DuplicatesBehavior = SnackbarDuplicatesBehavior.Allow;
        };

        Snackbar.Add($"Now click hide snackbar. Key: {Key}", Severity.Normal, config, Key);
        Snackbar.Add($"Now click hide snackbar. Key: {Key}", Severity.Normal, config, Key);
    }

    void Hide()
    {
        Snackbar.RemoveByKey(Key);
    }
}