Alerts

Basic Alert

Holy guacamole! You should check in on some of those fields below. 
@if (showCallAlert[1])
{
    <MudAlert Severity="Severity.Warning" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe(1))">
    <strong>Holy guacamole!</strong> You should check in on some of those fields
    below.
    </MudAlert>
}

@code {
    private bool showCallAlert[1] = true;

    private void CloseMe(1)
    {
        showCallAlert[1] = false;
    }
}

Live Example

@if (alertIds.Count > 0)
    {
        @foreach (var alertId in alertIds)
        {
            <MudAlert Severity="Severity.Success" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseAlert(alertId))"> Nice, you triggered this alert message! </MudAlert>
        }
    }

@code {

    private bool showCallAlert[2] = false;

    private void CloseMe2(2)
    {
        showCallAlert[2] = false;
    }

    private void ShowAlerts[2]()
    {
        showCallAlert[2] = true; 
    }
}

Default alerts

A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
<MudAlert NoIcon="true" Class="mud-alert-text-primary">
    A simple primary alert—check it out!
</MudAlert>

<MudAlert NoIcon="true" Class="mud-alert-text-secondary">
    A simple secondary alert—check it out!
</MudAlert>

<MudAlert Severity="Severity.Success" NoIcon="true">
    A simple success alert—check it out!
</MudAlert>

<MudAlert Severity="Severity.Error" NoIcon="true">
    A simple danger alert—check it out!
</MudAlert>

<MudAlert Severity="Severity.Warning" NoIcon="true">
    A simple warning alert—check it out!
</MudAlert>

<MudAlert Severity="Severity.Info" NoIcon="true">
    A simple info alert—check it out!
</MudAlert>

<MudAlert NoIcon="true" Class="mud-alert-text-light">
    A simple light alert—check it out!
</MudAlert>

<MudAlert NoIcon="true" Class="mud-alert-text-dark">
    A simple dark alert—check it out!
</MudAlert>

Links in Alerts

A simple primary alert with an example link. Give it a click if you like.
A simple secondary alert with an example link. Give it a click if you like.
A simple success alert with an example link. Give it a click if you like.
A simple danger alert with an example link. Give it a click if you like.
A simple warning alert with an example link. Give it a click if you like.
A simple info alert with an example link. Give it a click if you like.
A simple light alert with an example link. Give it a click if you like.
A simple dark alert with an example link. Give it a click if you like. 
<MudAlert NoIcon="true" Class="mud-alert-text-primary">
    A simple primary alert with <MudLink Href="javascript:void(0);" Class="alert-link">an example
        link</MudLink>.
    Give it a click if you like.
</MudAlert>

<MudAlert Class="mud-alert-text-secondary" NoIcon="true">
    A simple secondary alert with <MudLink Href="javascript:void(0);" Class="alert-link">an example
        link</MudLink>. Give it a click if you like.
</MudAlert>

<MudAlert everity="Severity.Success" NoIcon="true">
    A simple success alert with <MudLink Href="javascript:void(0);" Class="alert-link">an example
        link</MudLink>. Give it a click if you like.
</MudAlert>

<MudAlert everity="Severity.Error" NoIcon="true">
    A simple danger alert with <MudLink Href="javascript:void(0);" Class="alert-link">an example
        link</MudLink>. Give it a click if you like.
</MudAlert>

<MudAlert everity="Severity.Warning" NoIcon="true">
    A simple warning alert with <MudLink Href="javascript:void(0);" Class="alert-link">an example
        link</MudLink>. Give it a click if you like.
</MudAlert>

<MudAlert everity="Severity.Info" NoIcon="true">
    A simple info alert with <MudLink Href="javascript:void(0);" Class="alert-link">an example
        link</MudLink>. Give it a click if you like.
</MudAlert>

<MudAlert Class="mud-alert-text-light" NoIcon="true">
    A simple light alert with <MudLink Href="javascript:void(0);" Class="alert-link">an example
        link</MudLink>. Give it a click if you like.
</MudAlert>

<MudAlert Class="mud-alert-text-dark" NoIcon="true">
    A simple dark alert with <MudLink Href="javascript:void(0);" Class="alert-link">an example
        link</MudLink>. Give it a click if you like.
</MudAlert>

Solid Colored Alerts

A simple solid primary alert—check it out!
A simple solid secondary alert—check it out!
A simple solid success alert—check it out!
A simple solid danger alert—check it out!
A simple solid warning alert—check it out!
A simple solid info alert—check it out!
A simple solid light alert—check it out!
A simple solid dark alert—check it out! 
@if (showCallAlert3)
{
    <MudAlert Class="mud-alert-filled-primary" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe3())">
    A simple solid primary alert—check it out!
    </MudAlert>
}
@if (showCallAlert4)
{
    <MudAlert Class="mud-alert-filled-secondary" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe4())">
    A simple solid secondary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[5])
{
    <MudAlert Severity="Severity.Success" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe5())">
    A simple solid success alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[6])
{
    <MudAlert Severity="Severity.Error" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe6())">
    A simple solid danger alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[7])
{
    <MudAlert Severity="Severity.Warning" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe7())">
    A simple solid warning alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[8])
{
    <MudAlert Severity="Severity.Info" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe8())">
    A simple solid info alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[9])
{
    <MudAlert Class="mud-alert-filled-light" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe9())">
    A simple solid light alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[10])
{
    <MudAlert Class="mud-alert-filled-dark" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe10())">
    A simple solid dark alert—check it out!
    </MudAlert>
}

@code {
    private bool showCallAlert3 = true;
    private bool showCallAlert4 = true;
    private bool !showCallAlert[5] = true;
    private bool !showCallAlert[6] = true;
    private bool !showCallAlert[7] = true;
    private bool !showCallAlert[8] = true;
    private bool !showCallAlert[9] = true;
    private bool !showCallAlert[10] = true;

    private void CloseMe3()
    {
        showCallAlert3 = false;
    }
    private void CloseMe4()
    {
        showCallAlert4 = false;
    }
    private void CloseMe5()
    {
        !showCallAlert[5] = false;
    }
    private void CloseMe6()
    {
        !showCallAlert[6] = false;
    }
    private void CloseMe7()
    {
        !showCallAlert[7] = false;
    }
    private void CloseMe8()
    {
        !showCallAlert[8] = false;
    }
    private void CloseMe9()
    {
        !showCallAlert[9] = false;
    }
    }
    private void CloseMe10()
    {
        !showCallAlert[10] = false;
    }
}

Outline Alerts

A simple solid primary alert—check it out!
A simple solid secondary alert—check it out!
A simple solid success alert—check it out!
A simple solid danger alert—check it out!
A simple solid warning alert—check it out!
A simple solid info alert—check it out!
A simple solid light alert—check it out!
A simple solid dark alert—check it out! 
@if (!showCallAlert[11])
{
    <MudAlert Class="mud-alert-filled-primary" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe11())">
    A simple solid primary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[12])
{
    <MudAlert Class="mud-alert-filled-secondary" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe12())">
    A simple solid secondary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[13])
{
    <MudAlert Severity="Severity.Success" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe13())">
    A simple solid success alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[14])
{
    <MudAlert Severity="Severity.Error" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe14())">
    A simple solid danger alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[15])
{
    <MudAlert Severity="Severity.Warning" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe15())">
    A simple solid warning alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[16])
{
    <MudAlert Severity="Severity.Info" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe16())">
    A simple solid info alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[17])
{
    <MudAlert Class="mud-alert-filled-light" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe17())">
    A simple solid light alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[18])
{
    <MudAlert Class="mud-alert-filled-dark" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe18())">
    A simple solid dark alert—check it out!
    </MudAlert>
}

@code {
    private bool !showCallAlert[11] = true;
    private bool !showCallAlert[12] = true;
    private bool !showCallAlert[13] = true;
    private bool !showCallAlert[14] = true;
    private bool !showCallAlert[15] = true;
    private bool !showCallAlert[16] = true;
    private bool !showCallAlert[17] = true;
    private bool !showCallAlert[18] = true;

    private void CloseMe11()
    {
        !showCallAlert[11] = false;
    }
    private void CloseMe12()
    {
        !showCallAlert[12] = false;
    }
    private void CloseMe13()
    {
        !showCallAlert[13] = false;
    }
    private void CloseMe14()
    {
        !showCallAlert[14] = false;
    }
    private void CloseMe15()
    {
        !showCallAlert[15] = false;
    }
    private void CloseMe16()
    {
        !showCallAlert[16] = false;
    }
    private void CloseMe17()
    {
        !showCallAlert[17] = false;
    }
    }
    private void CloseMe18()
    {
        !showCallAlert[18] = false;
    }
}

Solid Alerts With Different Shadows

A simple solid primary alert with small shadow—check it out!
A simple solid primary alert with normal shadow—check it out!
A simple solid primary alert with large shadow—check it out!
A simple solid secondary alert with small shadow—check it out!
A simple solid secondary alert with normal shadow—check it out!
A simple solid secondary alert with large shadow—check it out! 
@if (!showCallAlert[19])
{
    <MudAlert Class="mud-alert-filled-primary" ShowCloseIcon="true" NoIcon="true" Elevation="1" CloseIconClicked="(() => CloseMe19())">
    A simple solid primary alert with small shadow—check it out!
    </MudAlert>
}
@if (!showCallAlert[20])
{
    <MudAlert Class="mud-alert-filled-primary" ShowCloseIcon="true" NoIcon="true" Elevation="3" CloseIconClicked="(() => CloseMe20())">
    A simple solid primary alert with normal shadow—check it out!
    </MudAlert>
}
@if (!showCallAlert[21])
{
    <MudAlert Class="mud-alert-filled-primary" ShowCloseIcon="true" NoIcon="true" Elevation="5" CloseIconClicked="(() => CloseMe21())">
    A simple solid primary alert with large shadow—check it out!
    </MudAlert>
}
@if (!showCallAlert[22])
{
    <MudAlert Class="mud-alert-filled-secondary" ShowCloseIcon="true" NoIcon="true" Elevation="1" CloseIconClicked="(() => CloseMe22())">
    A simple solid secondary alert with small shadow—check it out!
    </MudAlert>
}
@if (!showCallAlert[23])
{
    <MudAlert Class="mud-alert-filled-secondary" ShowCloseIcon="true" NoIcon="true" Elevation="3" CloseIconClicked="(() => CloseMe23())">
    A simple solid secondary alert with normal shadow—check it out!
    </MudAlert>
}
@if (!showCallAlert[24])
{
    <MudAlert Class="mud-alert-filled-secondary" ShowCloseIcon="true" NoIcon="true" Elevation="5" CloseIconClicked="(() => CloseMe24())">
    A simple solid secondary alert with large shadow—check it out!
    </MudAlert>
}

@code {
    private bool !showCallAlert[19] = true;
    private bool !showCallAlert[20] = true;
    private bool !showCallAlert[21] = true;
    private bool !showCallAlert[22] = true;
    private bool !showCallAlert[23] = true;
    private bool !showCallAlert[24] = true;

    private void CloseMe19()
    {
        !showCallAlert[19] = false;
    }
    private void CloseMe20()
    {
        !showCallAlert[20] = false;
    }
    private void CloseMe21()
    {
        !showCallAlert[21] = false;
    }
    private void CloseMe22()
    {
        !showCallAlert[22] = false;
    }
    private void CloseMe23()
    {
        !showCallAlert[23] = false;
    }
    private void CloseMe24()
    {
        !showCallAlert[24] = false;
    }
}

Default Alerts With Different Shadows

A simple primary alert with small shadow—check it out!
A simple primary alert with normal shadow—check it out!
A simple primary alert with large shadow—check it out!
A simple secondary alert with small shadow—check it out!
A simple secondary alert with normal shadow—check it out!
A simple secondary alert with large shadow—check it out!
<MudAlert NoIcon="true" Elevation="1" Class="mud-alert-text-primary">
    A simple primary alert with small shadow—check it out!
</MudAlert>
<MudAlert NoIcon="true" Elevation="3" Class="mud-alert-text-primary">
    A simple primary alert with normal shadow—check it out!
</MudAlert>
<MudAlert NoIcon="true" Elevation="5" Class="mud-alert-text-primary">
    A simple primary alert with large shadow—check it out!
</MudAlert>

<MudAlert NoIcon="true" Elevation="1" Class="mud-alert-text-secondary">
    A simple secondary alert with small shadow—check it out!
</MudAlert> 
<MudAlert NoIcon="true" Elevation="1" Class="mud-alert-text-secondary">
    A simple secondary alert with normal shadow—check it out!
</MudAlert> 
<MudAlert NoIcon="true" Elevation="1" Class="mud-alert-text-secondary">
    A simple secondary alert with large shadow—check it out!
</MudAlert>

rounded Solid Alerts

A simple solid rounded-lg primary alert—check it out!
A simple solid rounded-lg secondary alert—check it out!
A simple solid rounded-lg warning alert—check it out!
A simple solid rounded-lg danger alert—check it out! 
@if (!showCallAlert[25])
{
    <MudAlert Class="mud-alert-filled-primary rounded-pill" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe25())">
    A simple solid rounded-lg primary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[26])
{
    <MudAlert Class="mud-alert-filled-primary rounded-pill" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe26())">
    A simple solid rounded-lg secondary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[27])
{
    <MudAlert Severity="Severity.Warning" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe27())">
    A simple solid rounded-lg waring alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[28])
{
    <MudAlert Severity="Severity.Error" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe28())">
    A simple solid rounded-lg danger alert—check it out!
    </MudAlert>
}

@code {
    private bool !showCallAlert[25] = true;
    private bool !showCallAlert[26] = true;
    private bool !showCallAlert[27] = true;
    private bool !showCallAlert[28] = true;

    private void CloseMe25()
    {
        !showCallAlert[25] = false;
    }
    private void CloseMe26()
    {
        !showCallAlert[26] = false;
    }
    private void CloseMe27()
    {
        !showCallAlert[27] = false;
    }
    private void CloseMe28()
    {
        !showCallAlert[28] = false;
    }
}

rounded Outline Alerts

A simple outline rounded-lg primary alert—check it out!
A simple outline rounded-lg secondary alert—check it out!
A simple outline rounded-lg warning alert—check it out!
A simple outline rounded-lg danger alert—check it out! 
@if (!showCallAlert[29])
{
    <MudAlert Class="mud-alert-filled-primary rounded-pill" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe29())">
    A simple outline rounded-lg primary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[30])
{
    <MudAlert Class="mud-alert-filled-secondary rounded-pill" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe30())">
    A simple outline rounded-lg secondary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[31])
{
    <MudAlert Severity="Severity.Warning" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe31())">
    A simple outline rounded-lg warning alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[32])
{
    <MudAlert Severity="Severity.Error" Variant="Variant.Filled" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe32())">
    A simple outline rounded-lg danger alert—check it out!
    </MudAlert>
}

@code {
    private bool !showCallAlert[29] = true;
    private bool !showCallAlert[30] = true;
    private bool !showCallAlert[31] = true;
    private bool !showCallAlert[32] = true;

    private void CloseMe29()
    {
        !showCallAlert[29] = false;
    }
    private void CloseMe30()
    {
        !showCallAlert[30] = false;
    }
    private void CloseMe31()
    {
        !showCallAlert[31] = false;
    }
    private void CloseMe32()
    {
        !showCallAlert[32] = false;
    }
}

Default Rounded Alerts

A simple rounded-lg primary alert—check it out!
A simple rounded-lg secondary alert—check it out!
A simple rounded-lg warning alert—check it out!
A simple rounded-lg danger alert—check it out! 
@if (!showCallAlert[33])
{
    <MudAlert Class="mud-alert-text-primary rounded-pill" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe33())">
    A simple rounded-lg primary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[34])
{
    <MudAlert Class="mud-alert-text-secondary rounded-pill" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe34())">
    A simple rounded-lg secondary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[35])
{
    <MudAlert Severity="Severity.Warning" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe35())">
    A simple rounded-lg warning alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[36])
{
    <MudAlert Severity="Severity.Error" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe36())">
    A simple rounded-lg danger alert—check it out!
    </MudAlert>
}

@code {
    private bool !showCallAlert[33] = true;
    private bool !showCallAlert[34] = true;
    private bool !showCallAlert[35] = true;
    private bool !showCallAlert[36] = true;

    private void CloseMe33()
    {
        !showCallAlert[33] = false;
    }
    private void CloseMe34()
    {
        !showCallAlert[34] = false;
    }
    private void CloseMe35()
    {
        !showCallAlert[35] = false;
    }
    private void CloseMe36()
    {
        !showCallAlert[36] = false;
    }
}

Alerts With Custom Close Button

A simple rounded-lg primary alert—check it out!
A simple rounded-lg secondary alert—check it out!
A simple rounded-lg warning alert—check it out!
A simple rounded-lg danger   alert—check it out! 
@if (!showCallAlert[37])
{
    <MudAlert Class="mud-alert-text-primary rounded-pill" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe37())">
    A simple rounded-lg primary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[38])
{
    <MudAlert Class="mud-alert-text-secondary rounded-pill" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe38())">
    A simple rounded-lg secondary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[39])
{
    <MudAlert Severity="Severity.Warning" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe39())">
    A simple rounded-lg warning alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[40])
{
    <MudAlert Severity="Severity.Error" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe40())">
    A simple rounded-lg danger    alert—check it out!
    </MudAlert>
}

@code {
    private bool !showCallAlert[37] = true;
    private bool !showCallAlert[38] = true;
    private bool !showCallAlert[39] = true;
    private bool !showCallAlert[40] = true;

    private void CloseMe37()
    {
        !showCallAlert[37] = false;
    }
    private void CloseMe38()
    {
        !showCallAlert[38] = false;
    }
    private void CloseMe39()
    {
        !showCallAlert[39] = false;
    }
    private void CloseMe40()
    {
        !showCallAlert[40] = false;
    }
}

Alerts with icons

An example alert with an icon
An example success alert with an icon
An example warning alert with an icon
An example danger alert with an icon 
<MudAlert Severity="Severity.Info">
    An example alert with an icon
</MudAlert>
<MudAlert Severity="Severity.Success">
    An example success alert with an icon
</MudAlert>
<MudAlert Severity="Severity.Warning">
    An example warning alert with an icon
</MudAlert>
<MudAlert Severity="Severity.Error">
    An example error alert with an icon
</MudAlert>

Customized Alerts With SVG's

A customized primary alert with an icon
A customized secondary alert with an icon
A customized warning alert with an icon
A customized danger alert with an icon 
@if (!showCallAlert[41])
{
    <MudAlert Class="mud-alert-text-primary custom-alert-icon" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe41())">
    A simple rounded-lg primary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[42])
{
    <MudAlert Class="mud-alert-text-secondary custom-alert-icon" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe42())">
    A simple rounded-lg secondary alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[43])
{
    <MudAlert Severity="Severity.Warning" ShowCloseIcon="true" NoIcon="true" Class="custom-alert-icon" CloseIconClicked="(() => CloseMe43())">
    A simple rounded-lg warning alert—check it out!
    </MudAlert>
}
@if (!showCallAlert[44])
{
    <MudAlert Severity="Severity.Error" ShowCloseIcon="true" NoIcon="true" Class="custom-alert-icon" CloseIconClicked="(() => CloseMe44())">
    A simple rounded-lg danger    alert—check it out!
    </MudAlert>
}

@code {
    private bool !showCallAlert[41] = true;
    private bool !showCallAlert[42] = true;
    private bool !showCallAlert[43] = true;
    private bool !showCallAlert[44] = true;

    private void CloseMe41()
    {
        !showCallAlert[41] = false;
    }
    private void CloseMe42()
    {
        !showCallAlert[42] = false;
    }
    private void CloseMe43()
    {
        !showCallAlert[43] = false;
    }
    private void CloseMe44()
    {
        !showCallAlert[44] = false;
    }
}

Alerts With Images

A simple primary alert with image—check it out!
A simple secondary alert with image—check it out!
A simple warning alert with image—check it out!
A simple danger alert with image—check it out!
A simple info alert with image—check it out!
A simple light alert with image—check it out!
A simple dark alert with image—check it out! 
@if (!showCallAlert[45])
{
    <MudAlert Class="mud-alert-text-primary rounded-pill" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe45())">
    <MudAvatar Size="Size.Small">
        <MudImage Src="../assets/images/faces/3.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple primary alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[46])
{
    <MudAlert Class="mud-alert-text-secondary rounded-pill" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe46())">
    <MudAvatar Size="Size.Small">
        <MudImage Src="../assets/images/faces/5.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple secondary alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[47])
{
    <MudAlert Severity="Severity.Warning" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe47())">
    <MudAvatar Size="Size.Small">
        <MudImage Src="../assets/images/faces/8.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple warning alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[48])
{
    <MudAlert Severity="Severity.Error" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe48())">
    <MudAvatar Size="Size.Small">
        <MudImage Src="../assets/images/faces/11.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple danger alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[49])
{
    <Mud<MudAvatar Size="Size.Small">
        <MudImage Src="../assets/images/faces/13.jpg" Alt="img"></MudImage>
    </MudAvatar>Alert Severity="Severity.Info" ShowCloseIcon="true" NoIcon="true" Class="rounded-pill" CloseIconClicked="(() => CloseMe49())">
    A simple info alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[50])
{
    <MudAlert ShowCloseIcon="true" NoIcon="true" Class="mud-alert-text-light rounded-pill" CloseIconClicked="(() => CloseMe50())">
    <MudAvatar Size="Size.Small">
        <MudImage Src="../assets/images/faces/10.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple light alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[51])
{
    <MudAlert ShowCloseIcon="true" NoIcon="true" Class="mud-alert-text-dark rounded-pill" CloseIconClicked="(() => CloseMe51())">
    <MudAvatar Size="Size.Small">
        <MudImage Src="../assets/images/faces/15.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple dark alert with image—check it out!
    </MudAlert>
}

@code {
    private bool !showCallAlert[45] = true;
    private bool !showCallAlert[46] = true;
    private bool !showCallAlert[47] = true;
    private bool !showCallAlert[48] = true;
    private bool !showCallAlert[49] = true;
    private bool !showCallAlert[50] = true;
    private bool !showCallAlert[51] = true;

    private void CloseMe45()
    {
        !showCallAlert[45] = false;
    }
    private void CloseMe46()
    {
        !showCallAlert[46] = false;
    }
    private void CloseMe47()
    {
        !showCallAlert[47] = false;
    }
    private void CloseMe48()
    {
        !showCallAlert[48] = false;
    }
    private void CloseMe49()
    {
        !showCallAlert[49] = false;
    }
    private void CloseMe50()
    {
        !showCallAlert[50] = false;
    }
    private void CloseMe51()
    {
        !showCallAlert[51] = false;
    }
}

Alerts With Different size Images

A simple primary alert with image—check it out!
A simple secondary alert with image—check it out!
A simple warning alert with image—check it out!
A simple danger alert with image—check it out!
A simple info alert with image—check it out!
A simple dark alert with image—check it out! 
@if (!showCallAlert[52])
{
    <MudAlert Class="mud-alert-text-primary" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe52())">
    <MudAvatar Rounded="true" Class="mud-avatar-xs">
        <MudImage Src="../assets/images/faces/3.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple primary alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[53])
{
    <MudAlert Class="mud-alert-text-secondary" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe53())">
    <MudAvatar Rounded="true" Size="Size.Small">
        <MudImage Src="../assets/images/faces/5.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple secondary alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[54])
{
    <MudAlert Severity="Severity.Warning" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe54())">
    <MudAvatar Rounded="true">
        <MudImage Src="../assets/images/faces/8.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple warning alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[55])
{
    <MudAlert Severity="Severity.Error" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe55())">
    <MudAvatar Rounded="true">
        <MudImage Src="../assets/images/faces/11.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple danger alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[56])
{
    <Mud<MudAvatar 
    
    Rounded="true" Size="Size.Large">
        <MudImage Src="../assets/images/faces/13.jpg" Alt="img"></MudImage>
    </MudAvatar>Alert Severity="Severity.Info" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe56())">
    A simple info alert with image—check it out!
    </MudAlert>
}
@if (!showCallAlert[57])
{
    <MudAlert ShowCloseIcon="true" NoIcon="true" Class="mud-alert-text-dark" CloseIconClicked="(() => CloseMe57())">
    <MudAvatar Size="Size.Small">
        <MudImage Src="../assets/images/faces/14.jpg" Alt="img"></MudImage>
    </MudAvatar>
    A simple dark alert with image—check it out!
    </MudAlert>
}

@code {
    private bool !showCallAlert[52] = true;
    private bool !showCallAlert[53] = true;
    private bool !showCallAlert[54] = true;
    private bool !showCallAlert[55] = true;
    private bool !showCallAlert[56] = true;
    private bool !showCallAlert[57] = true;

    private void CloseMe52()
    {
        !showCallAlert[52] = false;
    }
    private void CloseMe53()
    {
        !showCallAlert[53] = false;
    }
    private void CloseMe54()
    {
        !showCallAlert[54] = false;
    }
    private void CloseMe55()
    {
        !showCallAlert[55] = false;
    }
    private void CloseMe56()
    {
        !showCallAlert[56] = false;
    }
    private void CloseMe57()
    {
        !showCallAlert[57] = false;
    }
}
Information?

This alert is created to just show the related information.

Confirmed

This alert is created to just show the confirmation message.

Warning

This alert is created to just show the warning message.

Danger

This alert is created to just show the danger message.

Information Alert
Information alert to show to information
cancel open
Success Alert
Success alert to show to success message
cancel open
Warning Alert
Warning alert to show warning message
cancel open
Danger Alert
Danger alert to show the danger message
cancel open
Information Alert
Information alert to show to information
cancel open
Success Alert
Success alert to show to success message
close
Warning Alert
Warning alert to show warning message
skip open
Danger Alert
Danger alert to show the danger message
close continue

Additional content

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

@if (!showCallAlert[70])
{
    <MudAlert Class="mud-alert-text-primary overflow-hidden pa-0 custom-header-alert" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe70())">
    <div class="pa-3 bg-primary mud-fixed-white-text d-flex justify-space-between">
        <MudText Typo="Typo.h6" Class="aletr-heading mb-0 mud-fixed-white-text">Thank you for reporting this.</MudText>
    </div>
    <div class="pa-3">
        <MudText Class="mb-0 fs-13">We appreciate you to let us know the bug in the template and for warning us about future consequences
            <MudLink Href="javascript:void(0);" Class="fw-semibold fs-13 mud-dark-text" Underline="Underline.Always">Visit for support for queries ?
            </MudLink>
        </MudText>
    </div>
}
@if (!showCallAlert[71])
{
    <MudAlert Class="mud-alert-text-secondary overflow-hidden pa-0 custom-header-alert" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe71())">
    <div class="pa-3 bg-secondary mud-fixed-white-text d-flex justify-space-between">
        <MudText Typo="Typo.h6" Class="aletr-heading mb-0 mud-fixed-white-text">Thank you for reporting this.</MudText>
    </div>
    <div class="pa-3">
        <MudText Class="mb-0 fs-13">We appreciate you to let us know the bug in the template and for warning us about future consequences
            <MudLink Href="javascript:void(0);" Class="fw-semibold fs-13 mud-dark-text" Underline="Underline.Always">Visit for support for queries ?
            </MudLink>
        </MudText>
    </div>
}
@if (!showCallAlert[72])
{
    <MudAlert Severity="Severity.Success" Class="overflow-hidden pa-0 custom-header-alert" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe72())">
    <div class="pa-3 bg-success mud-fixed-white-text d-flex justify-space-between">
        <MudText Typo="Typo.h6" Class="aletr-heading mb-0 mud-fixed-white-text">Thank you for reporting this.</MudText>
    </div>
    <div class="pa-3">
        <MudText Class="mb-0 fs-13">We appreciate you to let us know the bug in the template and for warning us about future consequences
            <MudLink Href="javascript:void(0);" Class="fw-semibold fs-13 mud-dark-text" Underline="Underline.Always">Visit for support for queries ?
            </MudLink>
        </MudText>
    </div>
}
@if (!showCallAlert[73])
{
    <MudAlert Severity="Severity.Warning" Class="overflow-hidden pa-0 custom-header-alert" ShowCloseIcon="true" NoIcon="true" CloseIconClicked="(() => CloseMe73())">
    <div class="pa-3 bg-warning mud-fixed-white-text d-flex justify-space-between">
        <MudText Typo="Typo.h6" Class="aletr-heading mb-0 mud-fixed-white-text">Thank you for reporting this.</MudText>
    </div>
    <div class="pa-3">
        <MudText Class="mb-0 fs-13">We appreciate you to let us know the bug in the template and for warning us about future consequences
            <MudLink Href="javascript:void(0);" Class="fw-semibold fs-13 mud-dark-text" Underline="Underline.Always">Visit for support for queries ?
            </MudLink>
        </MudText>
    </div>
}

@code {
    private bool !showCallAlert[70] = true;
    private bool !showCallAlert[71] = true;
    private bool !showCallAlert[72] = true;
    private bool !showCallAlert[73] = true;

    private void CloseMe70()
    {
        !showCallAlert[70] = false;
    }
    private void CloseMe71()
    {
        !showCallAlert[71] = false;
    }
    private void CloseMe72()
    {
        !showCallAlert[72] = false;
    }
    private void CloseMe73()
    {
        !showCallAlert[73] = false;
    }
}