Alert component

The <Alert> component is used to convey important information to the user through the use of contextual types, icons, and colors.

Overview

  • Alert main container.
    • AlertMessage content of the Alert.
    • AlertDescriptionadditional content of the Alert.
    • CloseButton an optional button to close the Alert.

When to use

  • When you need to show alert messages to users.
  • When you need a persistent static container which is closable by user actions.

Examples

Basic

<Alert Color="Color.Success" Visible>
    <AlertMessage>Well done!</AlertMessage>
    <AlertDescription>You successfully read this important alert message.</AlertDescription>
</Alert>

Basic

You can also add a CloseButton.
<Alert Color="Color.Success" @bind-Visible="@visible">
    <AlertDescription>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </AlertDescription>
    <AlertMessage>
        Alert Link.
    </AlertMessage>
    <CloseButton />
</Alert>
@code {
    bool visible = true;
}

With content

<Alert> can also contain additional HTML elements like headings and paragraphs, which will be styled with the appropriate color matching the variant.
<Alert Color="Color.Info" @bind-Visible="@visible">
    <Heading Size="HeadingSize.Is4" TextColor="TextColor.Success">
        Big one!
        <CloseButton />
    </Heading>
    <Paragraph>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
    </Paragraph>
    <Paragraph>
        <Button Color="Color.Info">Wanna do this</Button>
        <Button Color="Color.Light">Or do this</Button>
    </Paragraph>
</Alert>
@code {
    bool visible = true;
}

Usages

Two-way binding

To show alert just set Visible attribute to true.
<Alert Color="Color.Success" @bind-Visible="@visible">
    <AlertMessage>
        Alert test.
    </AlertMessage>
</Alert>

<Button Clicked="@OnButtonClick" Color="Color.Primary">Toggle alert</Button>
@code {
    bool visible = true;

    Task OnButtonClick()
    {
        visible = !visible;

        return Task.CompletedTask;
    }
}

Programmatically

<Alert @ref="myAlert" Color="Color.Success">
    <AlertMessage>
        Alert test.
    </AlertMessage>
</Alert>

<Button Clicked="@OnButtonClick" Color="Color.Primary">Show alert</Button>
@code{
    Alert myAlert;

    Task OnButtonClick()
    {
        return myAlert.Show();
    }
}

Functions

Name Description
Show() Makes the alert visible.
Hide() Hides the alert.
Toggle() Switches the alert visibility.

Attributes

Name Description Type Default
Dismisable Enables the alert to be closed by placing the padding for close button. bool false
Visible Defines the alert visibility. bool false
VisibleChanged Occurs when the alert visibility changes. EventCallback<bool>
Color Component visual or contextual style variants. Color None