Alert component

Alert

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

With close

You can also add a close button.

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

With content

You can also add a close button.

<Alert Color="Color.Info" IsShow="true">
    <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>

How to use

To show alert just set IsShow attribute to true.

<Alert Color="Color.Success" IsShow="true">
    ...
</Alert>

or programatically

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

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

@code{
    Alert myAlert;

    void OnButtonClick()
    {
        myAlert.Show();
    }
}

Functions

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

Attributes

Name Type Default Description
IsDismisable boolean false Enables the alert to be closed by placing the padding for close button.
IsShow boolean false Sets the alert visibilty.
Color Colors None Component visual or contextual style variants.