Static WebAssembly demo on GitHub Pages. Everything runs in your browser; server-only features use labeled stand-ins. Run locally for the full Blazor Server experience.

ComponentsFeedback and overlays

Alert

Alerts put a short, important message inline with the content it concerns. Choose one when the message must stay visible; use a snackbar for transient confirmations.

Severities

Severity sets the icon and color together, so the meaning never depends on color alone. Normal is for neutral notes.

The reading room closes at 8 pm on Fridays.
Your loan of “The Night Sky Atlas” renews automatically next week.
Your reservation is confirmed. Pick it up at the front desk.
Two of your books are due tomorrow.
We could not charge your card. Check the expiry date and try again.

Every severity and variant

All 15 combinations of Severity and Variant. Text is the quietest; filled is for messages that must interrupt.

MudAlert: Severity × Variant
Severity ↓ · Variant →TextFilledOutlined
Normal
Normal notice
Normal notice
Normal notice
Info
Info notice
Info notice
Info notice
Success
Success notice
Success notice
Success notice
Warning
Warning notice
Warning notice
Warning notice
Error
Error notice
Error notice
Error notice

Dense, square, elevated and icon-free

Dense trims the padding for toolbars and tables. Square, Elevation and NoIcon adjust the surface.

Dense: the newsletter goes out on Monday.
Square: no rounded corners, for alerts that sit flush against a card edge.
Elevation 2: lifted above the page with a shadow.
Warning, no icon: without the icon the words must carry the meaning.

Close buttons and custom icons

ShowCloseIcon adds a dismiss button; CloseIconClicked tells you which alert to remove. Icon and CloseIcon replace the defaults.

Your order of three paperbacks has shipped.
A gift card worth £20 was added to your account.
The poetry reading starts in 15 minutes.

Content alignment

ContentAlignment positions the message. Start and End follow the reading direction; Left and Right do not.

ContentAlignment.Center
ContentAlignment.Left
ContentAlignment.Right
ContentAlignment.Start
ContentAlignment.End

Alerts with actions

Put buttons in the content for the obvious next step, or make the whole alert clickable with OnClick.

Your membership expires on 30 November.
A signing with the author of “Tidal Clocks” on Saturday. Select this alert to open the calendar.

Playground

Change any parameter; the markup below updates with only the values that differ from the defaults.

The archive is read-only during the weekly backup.
Message
Severity
Variant
Content alignment
Elevation
<MudAlert Severity="Severity.Info">The archive is read-only during the weekly backup.</MudAlert>

Starting .NET in your browser…