Feedback

TwAlert

TwAlert is a Blazor alert component for status messages. Set Color, Dense, StartIcon and EndIcon, and make it Dismissible with a bindable Dismissed value.

Last updated 24 September 2026

Alert

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

This is an example alert with a link.

Razor

<TwAlert Id="example-alert" Class="mt-2" Color="Color.Accent">
    <p>This is an example alert with a <a href="#" class="underline m-0 p-0 inline">link</a>.</p>
</TwAlert>

Colors

TwAlert supports all the standard theme colors via the Color property.

Primary

Accent

Success

Danger

Warning

Info

Light

Dark

Razor

@foreach (Color c in ((Color[])Enum.GetValues(typeof(Color))).Take(10))
{
    <TwAlert Id="@($"{c.ToString()}-alert")" Class="mt-2" Color="@c" Dense>
        @c.ToString()
    </TwAlert>
}

Dense Alerts

You can also make alerts dense and take up less space using the Dense property.

This is a dense alert.

This is another dense alert.

Razor

<div class="grid grid-cols-1 md:grid-cols-2 mb-2 gap-2">
    <TwAlert Id="dense-alert-1" Class="mt-2" Color="Color.Success" Dense>
        This is a dense alert.
    </TwAlert>
    <TwAlert Id="dense-alert-2" Class="mt-2" Color="Color.Warning" Dense>
        This is another dense alert.
    </TwAlert>
</div>

Alert Icons

TwAlert also supports easy icons parameters StartIcon and EndIcon.

This is a dense alert with a start icon.

This is another dense alert with an end icon.

This is an alert with a start icon.

This is another alert with an end icon.

Razor

<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
    <TwAlert Id="icon-alert-1" Class="mt-2" Color="Color.Primary" Dense StartIcon="Icon.Wallet">
        This is a dense alert with a start icon.
    </TwAlert>
    <TwAlert Id="icon-alert-2" Class="mt-2" Color="Color.Danger" Dense EndIcon="Icon.Exclamation_Circle">
        This is another dense alert with an end icon.
    </TwAlert>
    <TwAlert Id="icon-alert-3" Class="mt-2" Color="Color.Info" StartIcon="Icon.Play">
        This is an alert with a start icon.
    </TwAlert>
    <TwAlert Id="icon-alert-4" Class="mt-2" Color="Color.Warning" EndIcon="Icon.Star">
        This is another alert with an end icon.
    </TwAlert>
</div>

Dismissible Alerts

You can also make alerts dismissible by using OnDismiss or the Dismissible property set as true, setting Dismissible to true will show the X button and won't require an event callback.

This is a dense alert that is dismissible.

Razor

<TwAlert Id="info-alert" StartIcon="Icon.Info_Circle" Class="mt-2" Color="Color.Primary" Dense OnDismiss="@(() => HandleDismiss())">
    This is a dense alert that is dismissible.
</TwAlert>

CSHARP

@code {
    private void HandleDismiss() => ToastService.ShowInfo("Alert dismissed!", "You have dismissed the alert.");
}

Theme Configuration

Styling is controlled by TwBlazorTheme.Components (a TwAlertTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`TextWrapper`	string
`Padding`	string
`DensePadding`	string
`Transition`	string
`DismissButtonSize`	string
`DismissButtonSpacingWithEndIcon`	string
`DismissButtonColor`	string

Global Theme Configuration

These reuse shared design tokens configured once on TwBlazorTheme, rather than being unique to this component.

Property	Type	Controls
`Colors`	TwBlazorPalette

Full reference: TwAlertTheme on the API docs.