Alert component


Alert component for feedback.

  • Alert main container.
    • AlertMessage content of Alert.
    • AlertDescription additional content of 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.


Basic usage

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

With close

You can also add a close button.

<Alert Color="Color.Success">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Alert Link.
    <CloseButton />

With content

You can also add a close button.

<Alert Color="Color.Info" Visible="true">
    <Heading Size="HeadingSize.Is4" TextColor="TextColor.Success">
        Big one!
        <CloseButton />
        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.
        <Button Color="Color.Info">Wanna do this</Button>
        <Button Color="Color.Light">Or do this</Button>

How to use

To show alert just set Visible attribute to true.

<Alert Color="Color.Success" Visible="true">

or programmatically

<Alert @ref="myAlert" Color="Color.Success">

<Button Clicked="@OnButtonClick">Show alert</Button>

    Alert myAlert;

    void OnButtonClick()


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


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