MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Alert

An alert is used to notify the user about an important message without interrupting the ongoing task.

See Alert API for parameter documentation.

Simple alerts

There are five severity levels that each set a different icon and a color.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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. In addition to that, outlined and filled is available.

Outlined

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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;
}

Snackbar Alerts

You can use the Snackbar to display Alerts.

An error has occurred. This application may no longer respond until reloaded. Reload 🗙