Alert

Usage

This is an alert

Thanks for subscribing to our newsletter!

<LumexAlert Title="This is an alert"
            Description="Thanks for subscribing to our newsletter!" />

When both Title and TitleContent are provided, TitleContent takes precedence.

Radius

Use Radius parameter to control the border radius of the alert.

This is a `none` radius alert

This is a `small` radius alert

This is a `medium` radius alert

This is a `large` radius alert

This is a `full` radius alert

<div class="w-full flex flex-col gap-3">
    @foreach( var radius in Enum.GetValues<Radius>() )
    {
        var radiusText = radius.ToString().ToLower();
        <LumexAlert Title="@($"This is a `{radiusText}` radius alert")" Radius="@radius" />
    }
</div>

Colors

Use Color parameter to set the color of the alert.

This is a `default` color alert

This is a `primary` color alert

This is a `secondary` color alert

This is a `success` color alert

This is a `warning` color alert

This is a `danger` color alert

This is a `info` color alert

<div class="w-full flex flex-col gap-3">
    @foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
    {
        var colorText = color.ToString().ToLower();
        <LumexAlert Title="@($"This is a `{colorText}` color alert")" Color="@color" />
    }
</div>

Variants

Use Variant parameter to change the visual style of the alert.

This is a `solid` variant alert

This is a `outlined` variant alert

This is a `flat` variant alert

This is a `faded` variant alert

<div class="w-full flex flex-col gap-3">
    @foreach( var variant in Enum.GetValues<AlertVariant>() )
    {
        var variantText = variant.ToString().ToLower();
        <LumexAlert Title="@($"This is a `{variantText}` variant alert")" Variant="@variant" />
    }
</div>

Custom Icon

By default, the alert displays an appropriate icon based on the Color parameter. Use Icon parameter to replace the default icon with a custom one.

An alert with a custom icon

@using LumexUI.Shared.Icons

<LumexAlert>
    <IconContent>
        <HeartFilledIcon Size="20" />
    </IconContent>
    <ChildContent>An alert with a custom icon</ChildContent>
</LumexAlert>

Hide Icon

Use HideIcon parameter to hide the icon entirely.

This is an alert

Thanks for subscribing to our newsletter!

<LumexAlert Title="This is an alert"
            Description="Thanks for subscribing to our newsletter!"
            Color="@ThemeColor.Secondary"
            Variant="@AlertVariant.Faded"
            HideIcon="@true" />

Closeable

Use Closeable or OnClose parameters to add a close button to dismiss the alert.

Success Notification

Your action has been completed successfully. We'll notify you when updates are available.

@if( _isVisible )
{
    <LumexAlert Title="@title"
                Description="@description"
                Color="@ThemeColor.Success"
                Variant="@AlertVariant.Faded"
                Visible="@_isVisible"
                OnClose="@(() => _isVisible = false)" />
}
else
{
    <LumexButton Variant="@Variant.Outlined"
                 OnClick="@(() => _isVisible = true)">
        Show alert
    </LumexButton>
}

@code {
    private string title = "Success Notification";
    private string description = "Your action has been completed successfully. We'll notify you when updates are available.";

    private bool _isVisible = true;
}

End Content

Use EndContent parameter to add additional content at the end of the alert, such as actions.

You have no credits left

Upgrade to a paid plan to continue

<LumexAlert Title="You have no credits left"
            Description="Upgrade to a paid plan to continue"
            Color="@ThemeColor.Warning"
            Variant="@AlertVariant.Faded">
    <EndContent>
        <LumexButton Size="@Size.Small"
                     Color="@ThemeColor.Warning"
                     Variant="@Variant.Flat">
            Upgrade
        </LumexButton>
    </EndContent>
</LumexAlert>

Two-way Data Binding

Use @bind-Visible directive or Visible and VisibleChanged parameters to manually control alert visibility.

This is an alert

Thanks for subscribing to our newsletter!

Visible: true

<div class="w-full flex flex-col gap-2">
    @if( _isVisible )
    {
        <LumexAlert Title="This is an alert"
                    Description="Thanks for subscribing to our newsletter!"
                    Color="@ThemeColor.Info"
                    Closeable="@true"
                    @bind-Visible="@_isVisible" />
    }
    else
    {
        <LumexButton Variant="@Variant.Outlined"
                     OnClick="@(() => _isVisible = true)"
                     Class="w-fit">
            Show alert
        </LumexButton>
    }

    <p class="text-small text-default-500">
        Visible: @(_isVisible ? "true" : "false")
    </p>
</div>

@code {
    private bool _isVisible = true;
}

Custom Styles

Class: The CSS class names to style the alert wrapper.
Classes: The CSS class names to style the alert slots.

The documents you requested are ready to be viewed

<LumexAlert Description="The documents you requested are ready to be viewed"
            Color="@ThemeColor.Primary"
            Variant="@AlertVariant.Flat"
            Classes="@_classes">
    <div class="flex items-center gap-2 mt-2">
        <LumexButton Size="@Size.Small"
                     Variant="@Variant.Outlined"
                     Class="bg-background text-foreground-700 border shadow-xs">
            View documents
        </LumexButton>

        <LumexButton Size="@Size.Small"
                     Variant="@Variant.Light"
                     Class="text-foreground-600">
            Remind me later
        </LumexButton>
    </div>
</LumexAlert>

@code {
    private AlertSlots _classes = new()
    {
        Base = new ElementClass()
            .Add( "relative" )
            .Add( "shadow-sm" )
            .Add( "bg-default-50" )
            .Add( "overflow-hidden" )
            .Add( "before:absolute before:z-10 before:left-0 before:inset-y-0 before:w-1 before:bg-primary" )
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

Alert

On this page