Blazor Alerts

Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.

Examples#

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.
Use the alert-link css class to quickly provide matching colored links within any alert.

Additional Content#

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
razor
<Alert Color="AlertColor.Success">
    <h4 class="alert-heading">Well done!</h4>
    <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
    <hr>
    <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</Alert>

Icons#

Similarly, you can use Bootstrap Icons to create alerts with icons.

Dismissing#

1. Using the Dismissable="true", it’s possible to dismiss any alert inline.
2. Manually we can close an alert with button click.
WARNING
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend subscribing to the OnClosed callback event and programmatically sets focus to the most appropriate location on the page.

Switch alert type dynamically#