Toasts
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
<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);
}
}

