Blazor Alerts

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


Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.

Additional Content#

Alerts can also contain additional HTML elements like headings, paragraphs and dividers.


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


1. Using the Dismissable="true", it’s possible to dismiss any alert inline.
2. Manually we can close an alert with button click.
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#