Alert - MikaBerglund/Blazor-Bootstrap GitHub Wiki

Alert Component

The Alert component is used to provide feedback messages, typically in response to user actions.

Parameters

The Alert component exposes the following public parameters.

Name Type Description
Heading string The text to put in the heading of the alert.
HeadingTemplate RenderFragment Enables you to customize the heading if you need more than just the text in Heading for the heading of your alert. Usage is demonstrated in the samples below. See Bootstrap documentation for details on how to build an alert heading.
IsDismissible bool Specifies whether the alert can be dismissed. If set to true, a close icon will be added to the alert's top-right corner.
FadeOnDismiss bool Specifies whether to fade the alert when dismissed. Has no affect on alerts that are not dismissible.

Methods

Method Description
DismissAsync() Dismisses the Alert component. Requires that the IsDismissible property is set to true. If not, the method will throw an InvalidOperationException exception.

Events Callbacks

Name Description
OnDismiss Fired when the dismissal of the Alert has started, but not yet fully completed.
OnDismissed Fired when the Alert has been dismissed. The argument delivered with the event is the reference to the alert that was dismissed.

Related Components

If you want to create links in your alerts, please consider using the AlertLink component, which is properly styled for alerts.

Examples

Below are a few examples of how to use the Alert component.

Basic Usage

A very simple way of using the Alert component.

@using BlazorBootstrap.Components

<Alert Color="NamedColor.Success">
    This is a simple alert that displays a success message.
</Alert>

The below sample produces the same output, but explicitly uses the <ChildContent> template parameter to specify the child content of the Alert.

<Alert Color="NamedColor.Success">
    <ChildContent>
        This is a simple alert that displays a success message.
    </ChildContent>
</Alert>

Dismissible Alerts

Just with one property you can set the Alert component to be dismissible, and control the behaviour with another property.

<Alert Color="NamedColor.Success" IsDismissible="true" FadeOnDismiss="true">
    This is a simple alert that displays a success message.
</Alert>

Custom Dismissal

An alert can also be dismissed from custom code, like from the click of a button. This requires that you capture the reference to the Alert component you want to dismiss, and use that reference to call the DismissAsync() method on the Alert.

@code { private Alert myAlert; }
<Alert Color="NamedColor.Success" IsDismissible="true" FadeOnDismiss="true" @ref="myAlert">
    This is a simple alert that displays a success message.
</Alert>

<Button OnClicked="async () => await myAlert.DismissAsync()">Dismiss</Button>

Handling Dismissal Events

You can add code that is triggered when the Alert component has been dismissed.

@code {
    bool isDismissed = false;
}

<Alert Color="NamedColor.Info" IsDismissible="true" FadeOnDismiss="true" HeadingText="Handling Dismissal" OnDismissed="() => isDismissed = true">
    This alert is hooked up with an event handler that is fired when the alert is dismissed.
</Alert>

@if (isDismissed)
{
    <Alert Color="NamedColor.Success" IsDismissible="true" FadeOnDismiss="true">
        The alert was successfully dismissed.
    </Alert>
}

Headings and Links

To add a heading to your Alert component, you can simply use the HeadingText parameter.

<Alert Color="NamedColor.Warning" HeadingText="Heads Up!">
    You are about to perform an action that we cannot undo. Are you absolutely sure?
</Alert>

This is a more advanced example of how to use headings and links with the Alert component. This sample also uses the AlertLink component.

<Alert Color="NamedColor.Info">
    <HeadingTemplate>
        <Heading Level="HeadingLevel.H4" class="alert-heading">Please Note!</Heading>
    </HeadingTemplate>
    <ChildContent>
        This is the body of the alert with a few links.
        <ul>
            <li><AlertLink href="https://github.com/MikaBerglund/Blazor-Bootstrap" target="_blank">Blazor Bootstrap</AlertLink></li>
            <li><AlertLink href="https://github.com/MikaBerglund/Blazor-Bootstrap/wiki" target="_blank">Blazor Bootstrap Wiki</AlertLink></li>
        </ul>
    </ChildContent>
</Alert>

Please note! If you use one of the template parameters, such as the <AlertHeading> in the sample above, then you must also explicitly use the <ChildContent> parameter to add the contents for the alert.

⚠️ **GitHub.com Fallback** ⚠️