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>
        <SimpleButton Color="Color.Info">Wanna do this</SimpleButton>
        <SimpleButton Color="Color.Light">Or do this</SimpleButton>
    </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>

@functions{
    Alert myAlert;

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