Simple alerts
There is five severity levels that sets an icon and a color.
<MudAlert Severity="Severity.Normal">The reactor type is RBMK-1000</MudAlert> <MudAlert Severity="Severity.Info">The reactor was fired up successfully</MudAlert> <MudAlert Severity="Severity.Success">The reactor is running at optimum temperature</MudAlert> <MudAlert Severity="Severity.Warning">The reactor temperature exceeds the optimal range</MudAlert> <MudAlert Severity="Severity.Error">Meltdown is imminent</MudAlert>
Variants
The default variant is normal, addition to that outlined and filled is available.
Outlined
<MudAlert Severity="Severity.Normal" Variant="Variant.Outlined">The reactor type is RBMK-1000</MudAlert> <MudAlert Severity="Severity.Info" Variant="Variant.Outlined">The reactor was fired up successfully</MudAlert> <MudAlert Severity="Severity.Success" Variant="Variant.Outlined">The reactor is running at optimum temperature</MudAlert> <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined">The reactor temperature exceeds the optimal range</MudAlert> <MudAlert Severity="Severity.Error" Variant="Variant.Outlined">Meltdown is imminent</MudAlert>
Filled
<MudAlert Severity="Severity.Normal" Variant="Variant.Filled">The reactor type is RBMK-1000</MudAlert> <MudAlert Severity="Severity.Info" Variant="Variant.Filled">The reactor was fired up successfully</MudAlert> <MudAlert Severity="Severity.Success" Variant="Variant.Filled">The reactor is running at optimum temperature</MudAlert> <MudAlert Severity="Severity.Warning" Variant="Variant.Filled">The reactor temperature exceeds the optimal range</MudAlert> <MudAlert Severity="Severity.Error" Variant="Variant.Filled">Meltdown is imminent</MudAlert>
Dense
Taking up to much space? set the Dense
property to true. It removes the vertical padding and lowers the horizontal.
No Icons
You can disable the alert icons with the bool NoIcon
set to true.
Rounded and Square
By default the alert is set to rounded corners by your themes default value. If you need a square Alert but not change the theme you can the Square
property to true.
Elevation
The component also accept the Elevation
property with a scale from 0 to 24.
<MudAlert Severity="Severity.Normal" Variant="Variant.Filled" Elevation="" Class="mt-16" Style="width:364px;"> Elevated Alert, or is it? </MudAlert> <MudSlider @bind-Value="elevation" Min="0" Max="24" Class="my-4">Elevation</MudSlider>
@code { public int elevation = 1; }
Snackbar Alerts
You can use the Snackbar to display Alerts.