Alert component

Overview

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.

Examples

Basic usage

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

With close

You can also add a close button.

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

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 />
    </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 Visible attribute to true.

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

or programmatically

<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
Dismisable boolean false Enables the alert to be closed by placing the padding for close button.
Visible boolean false Sets the alert visibility.
Color Colors None Component visual or contextual style variants.