Alert

An alert is used to display an important message which is statically embedded in the page content.

API
Note

To notify the user with dynamic alerts which overlay the page check out Snackbar.

Simple alerts

There are five severity levels that each set a different 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 text. In 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 too much space? Set the Dense property to true. It removes the vertical padding and lowers the horizontal.

<MudGrid>
    <MudItem md="4" xs="12">
        <MudAlert Severity="Severity.Normal" Dense="true" Class="my-2">Dense Default</MudAlert>
        <MudAlert Severity="Severity.Info" Dense="true" Class="my-2">Dense Info</MudAlert>
        <MudAlert Severity="Severity.Success" Dense="true" Class="my-2">Dense Success</MudAlert>
        <MudAlert Severity="Severity.Warning" Dense="true" Class="my-2">Dense Warning</MudAlert>
        <MudAlert Severity="Severity.Error" Dense="true" Class="my-2">Dense Error</MudAlert>
    </MudItem>
    <MudItem md="4" xs="12">
        <MudAlert Severity="Severity.Normal" Variant="Variant.Outlined" Dense="true" Class="my-2">Dense Default</MudAlert>
        <MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Dense="true" Class="my-2">Dense Info</MudAlert>
        <MudAlert Severity="Severity.Success" Variant="Variant.Outlined" Dense="true" Class="my-2">Dense Success</MudAlert>
        <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Dense="true" Class="my-2">Dense Warning</MudAlert>
        <MudAlert Severity="Severity.Error" Variant="Variant.Outlined" Dense="true" Class="my-2">Dense Error</MudAlert>
    </MudItem>
    <MudItem md="4" xs="12">
        <MudAlert Severity="Severity.Normal" Variant="Variant.Filled" Dense="true" Class="my-2">Dense Default</MudAlert>
        <MudAlert Severity="Severity.Info" Variant="Variant.Filled" Dense="true" Class="my-2">Dense Info</MudAlert>
        <MudAlert Severity="Severity.Success" Variant="Variant.Filled" Dense="true" Class="my-2">Dense Success</MudAlert>
        <MudAlert Severity="Severity.Warning" Variant="Variant.Filled" Dense="true" Class="my-2">Dense Warning</MudAlert>
        <MudAlert Severity="Severity.Error" Variant="Variant.Filled" Dense="true" Class="my-2">Dense Error</MudAlert>
    </MudItem>
</MudGrid>
No Icons

You can disable the alert icons with the bool NoIcon set to true.

<MudGrid>
    <MudItem md="4" xs="12">
        <MudAlert Severity="Severity.Normal" NoIcon="true" Class="mb-2 mt-3">Default No Icon</MudAlert>
        <MudAlert Severity="Severity.Info" NoIcon="true" Class="my-2">Info No Icon</MudAlert>
        <MudAlert Severity="Severity.Success" NoIcon="true" Class="my-2">Success No Icon</MudAlert>
        <MudAlert Severity="Severity.Warning" NoIcon="true" Class="my-2">Warning No Icon</MudAlert>
        <MudAlert Severity="Severity.Error" NoIcon="true" Class="my-2">Error No Icon</MudAlert>
    </MudItem>
    <MudItem md="4" xs="12">
        <MudAlert Severity="Severity.Normal" Variant="Variant.Outlined" NoIcon="true" Class="my-2">Icon Default No</MudAlert>
        <MudAlert Severity="Severity.Info" Variant="Variant.Outlined" NoIcon="true" Class="my-2">Info No Icon</MudAlert>
        <MudAlert Severity="Severity.Success" Variant="Variant.Outlined" NoIcon="true" Class="my-2">Success No Icon</MudAlert>
        <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" NoIcon="true" Class="my-2">Warning No Icon</MudAlert>
        <MudAlert Severity="Severity.Error" Variant="Variant.Outlined" NoIcon="true" Class="my-2">Error No Icon</MudAlert>
    </MudItem>
    <MudItem md="4" xs="12">
        <MudAlert Severity="Severity.Normal" Variant="Variant.Filled" NoIcon="true" Class="mb-2 mt-3">Default No Icon</MudAlert>
        <MudAlert Severity="Severity.Info" Variant="Variant.Filled" NoIcon="true" Class="my-2">Info No Icon</MudAlert>
        <MudAlert Severity="Severity.Success" Variant="Variant.Filled" NoIcon="true" Class="my-2">Success No Icon</MudAlert>
        <MudAlert Severity="Severity.Warning" Variant="Variant.Filled" NoIcon="true" Class="my-2">Warning No Icon</MudAlert>
        <MudAlert Severity="Severity.Error" Variant="Variant.Filled" NoIcon="true" Class="my-2">Error No Icon</MudAlert>
    </MudItem>
</MudGrid>
Rounded and Square

By default, the alert is set to rounded corners by your theme's default value. If you need a square Alert but don't want to change the theme, you can set the Square property to true.

<MudGrid>
    <MudItem md="4" xs="12">
        <MudAlert Severity="Severity.Normal" Square="true" Class="mb-2 mt-3">Default Square</MudAlert>
        <MudAlert Severity="Severity.Info" Square="true" Class="my-2">Info Square</MudAlert>
        <MudAlert Severity="Severity.Success" Square="true" Class="my-2">Success Square</MudAlert>
        <MudAlert Severity="Severity.Warning" Square="true" Class="my-2">Warning Square</MudAlert>
        <MudAlert Severity="Severity.Error" Square="true" Class="my-2">Error Square</MudAlert>
    </MudItem>
    <MudItem md="4" xs="12">
        <MudAlert Severity="Severity.Normal" Variant="Variant.Outlined" Square="true" Class="my-2">Default Square</MudAlert>
        <MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Square="true" Class="my-2">Info Square</MudAlert>
        <MudAlert Severity="Severity.Success" Variant="Variant.Outlined" Square="true" Class="my-2">Success Square</MudAlert>
        <MudAlert Severity="Severity.Warning" Variant="Variant.Outlined" Square="true" Class="my-2">Warning Square</MudAlert>
        <MudAlert Severity="Severity.Error" Variant="Variant.Outlined" Square="true" Class="my-2">Error Square</MudAlert>
    </MudItem>
    <MudItem md="4" xs="12">
        <MudAlert Severity="Severity.Normal" Variant="Variant.Filled" Square="true" Class="mb-2 mt-3">Default Square</MudAlert>
        <MudAlert Severity="Severity.Info" Variant="Variant.Filled" Square="true" Class="my-2">Info Square</MudAlert>
        <MudAlert Severity="Severity.Success" Variant="Variant.Filled" Square="true" Class="my-2">Success Square</MudAlert>
        <MudAlert Severity="Severity.Warning" Variant="Variant.Filled" Square="true" Class="my-2">Warning Square</MudAlert>
        <MudAlert Severity="Severity.Error" Variant="Variant.Filled" Square="true" Class="my-2">Error Square</MudAlert>
    </MudItem>
</MudGrid>
Elevation

The component also accepts the Elevation property with a scale from 0 to 24.

Elevation

<MudAlert Severity="Severity.Normal" Variant="Variant.Filled" Elevation="@elevation" Class="mt-16">
    Elevated Alert, or is it?
</MudAlert>
<MudSlider @bind-Value="elevation" Min="0" Max="24" Class="my-4">Elevation</MudSlider>

@code {
    public int elevation = 1;
}
Content Alignment

Set the ContentAlignment property to define the content alignment. 

<MudAlert Severity="Severity.Normal" ContentAlignment="HorizontalAlignment.Left">Left</MudAlert>
<MudAlert Severity="Severity.Info" ContentAlignment="HorizontalAlignment.Center">Center</MudAlert>
<MudAlert Severity="Severity.Success" ContentAlignment="HorizontalAlignment.Right">Right</MudAlert>
<MudAlert Severity="Severity.Warning" ContentAlignment="HorizontalAlignment.Start">Start</MudAlert>
<MudAlert Severity="Severity.Error" ContentAlignment="HorizontalAlignment.End">End</MudAlert>
Close Icon and Event

Set the ShowCloseIcon property to True to display a Close icon. CloseIconClicked provides the EventCallback when clicking on the Close icon of the alert 

@if (showLeaveAlert)
{
    <MudAlert Severity="Severity.Info" ContentAlignment="HorizontalAlignment.Center" ShowCloseIcon="true" CloseIconClicked="(() => CloseMe(true))">Time to leave. Please close me!</MudAlert>
}
@if (showCallAlert)
{
    <MudAlert Severity="Severity.Success" ContentAlignment="HorizontalAlignment.Center" ShowCloseIcon="true" CloseIconClicked="(() => CloseMe(false))">Time to call. Please close me!</MudAlert>
}
@if (!showLeaveAlert && !showCallAlert)
{
    <div style="display: flex; justify-content: center;" class="mt-6">
        <MudButton @onclick="ShowAlerts" Variant="Variant.Filled" Color="Color.Primary">Show Alerts</MudButton>
    </div>
}

@code { 
    private bool showCallAlert = true;
    private bool showLeaveAlert = true;

    private void CloseMe(bool value)
    {
        if (value)
        {
            showLeaveAlert = false;
        }
        else
        {
            showCallAlert = false;
        }
    }

    private void ShowAlerts()
    {
        showCallAlert = true;
        showLeaveAlert = true;
    }
}
AppBar
An unhandled error has occurred. Reload 🗙