Blazorise Alert component

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

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

Overview

  • <Alert> the main container.

    • <AlertMessage> the main content of the Alert.

    • <AlertDescription> an optional description of the Alert.

    • <CloseButton> an optional close button, which will hide 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>

Custom colorsNew

Use a custom CSS color to style the alert background, border, and text. 
<Alert Color="@("#0F766E")" Visible>
    <AlertMessage>Export ready.</AlertMessage>
    <AlertDescription>Your report is ready to download.</AlertDescription>
</Alert>
<Alert Color="@CssColor.Variable("--accent", "#7C3AED")" Visible>
    <AlertMessage>Draft saved.</AlertMessage>
    <AlertDescription>You can continue editing whenever you are ready.</AlertDescription>
</Alert>
<Alert Color="@(new Color(CssColor.Rgb(234, 88, 12)))" Visible>
    <AlertMessage>Review needed.</AlertMessage>
    <AlertDescription>Check the selected files before continuing.</AlertDescription>
</Alert>

Close button

Adding a CloseButton automatically applies the padding and positioning needed for dismissal. An explicit Dismisable value overrides this behavior: use true for custom close controls or false to opt out of automatic styling. The close button's AutoClose parameter controls whether clicking it hides the alert. 
<Alert Color="Color.Success" @bind-Visible="@visible">
    <AlertMessage>
        Alert Link.
    </AlertMessage>
    <AlertDescription>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </AlertDescription>
    <CloseButton />
</Alert>

@code {
    bool visible = true;
}

Extra 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" Dismisable>
    <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();
    }
}

AnimationNew

Set Animated="false" for immediate changes, or use AnimationDuration to adjust the duration in milliseconds. A null duration preserves the provider's default; zero or a negative value disables animations. Toggle the alert or use its close button to see the entrance and exit effects. The alert stays in layout until its exit animation finishes. Animations also work without a close button, and the initial visibility is applied immediately. Reduced-motion preferences disable the effects. VisibleChanged reports the requested visibility without waiting for animation completion. The effects use CSS display transitions and starting styles. Unsupported effects fall back to immediate visibility changes. 
<Div Flex="Flex.Wrap.AlignItems.Center" Gap="Gap.Is3" Margin="Margin.Is3.FromBottom">
    <Field Margin="Margin.Is0" Width="Width.Auto">
        <Switch @bind-Value="animated">Animate transitions</Switch>
    </Field>
    <Field Margin="Margin.Is0" Width="Width.Auto">
        <Switch @bind-Value="dismissable">Show close button</Switch>
    </Field>
    <Field Flex="Flex.InlineFlex.AlignItems.Center" Gap="Gap.Is2" Margin="Margin.Is0" Width="Width.Auto">
        <FieldLabel Margin="Margin.Is0">Animation duration</FieldLabel>
        <Select TValue="int?" @bind-Value="animationDuration" Width="Width.Auto">
            <SelectItem TValue="int?" Value="@((int?)null)">Provider default</SelectItem>
            <SelectItem TValue="int?" Value="0">Immediate</SelectItem>
            <SelectItem TValue="int?" Value="100">100 ms</SelectItem>
            <SelectItem TValue="int?" Value="200">200 ms</SelectItem>
            <SelectItem TValue="int?" Value="400">400 ms</SelectItem>
            <SelectItem TValue="int?" Value="1000">1000 ms</SelectItem>
        </Select>
    </Field>
    <Button Color="Color.Primary" Clicked="@(() => visible = !visible)">Toggle alert</Button>
</Div>
<Alert Color="Color.Success" Dismisable="@dismissable" @bind-Visible="visible" Animated="@animated" AnimationDuration="@animationDuration">
    <AlertMessage>Settings saved</AlertMessage>
    <AlertDescription>The machine is ready for the next production run.</AlertDescription>
    @if ( dismissable )
    {
        <CloseButton />
    }
</Alert>

@code {
    private bool animated = true;

    private int? animationDuration = 400;

    private bool dismissable = true;

    private bool visible = true;
}

Best Practices

Make Messages Actionable

Write a concise message that explains what happened and, when applicable, what the user should do next. Match the color to the message severity, but include meaningful text or an appropriate icon so color is not the only indication of status.

Feedback Pattern

Alerts are appropriate for information that belongs in the current page and may need to remain visible. Make an alert dismissible only when it can be safely ignored, and keep blocking errors visible until the problem is resolved. For brief feedback about a completed action, use a Toast instead.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page