Alert - Fod.DemoPage

Quick Start

Basic alert usage with default settings.

This is a basic informational alert message.

razor

<FodAlert Color="AlertColor.Info">
    This is a basic informational alert message.
</FodAlert>

Colors

Alerts support four semantic colors: Info, Success, Warning, and Error. Each color conveys a specific message type.

Info

Scheduled maintenance today. Some services may be temporarily unavailable.

Success

Your changes have been saved successfully.

Warning

Your session will expire in 5 minutes. Please save your work.

Error

Unable to connect to server. Please check your internet connection.

razor

<FodAlert Color="AlertColor.Info">Info message</FodAlert>
<FodAlert Color="AlertColor.Success">Success message</FodAlert>
<FodAlert Color="AlertColor.Warning">Warning message</FodAlert>
<FodAlert Color="AlertColor.Error">Error message</FodAlert>

Variants

Alerts come in three visual variants: Standard (subtle background), Filled (solid background), and Outlined (bordered).

Standard (Default)

Standard variant with subtle background.

Filled

Filled variant with solid colored background.

Outlined

Outlined variant with colored border.

All Colors in Filled Variant

Info filled alert

Success filled alert

Warning filled alert

Error filled alert

razor

<FodAlert Color="AlertColor.Info" Variant="AlertVariant.Standard">
    Standard variant
</FodAlert>

<FodAlert Color="AlertColor.Info" Variant="AlertVariant.Filled">
    Filled variant
</FodAlert>

<FodAlert Color="AlertColor.Info" Variant="AlertVariant.Outlined">
    Outlined variant
</FodAlert>

With Title

Alerts can include a title for additional context. Use Title for simple text or TitleContent for rich content.

With Title

This alert includes a title to provide additional context.

Success with Title

All files have been uploaded successfully.

Warning with Title

Please review the following items before proceeding.

Error with Title

Unable to process your request. Please try again later.

razor

<FodAlert Color="AlertColor.Info" Title="Information">
    This alert includes a title to provide additional context.
</FodAlert>

<FodAlert Color="AlertColor.Success" Title="Operation Complete">
    All files have been uploaded successfully.
</FodAlert>

Custom Icons

Override the default icon or hide it entirely using the Icon and HideIcon parameters.

Default Icon (automatic)

Uses the default icon for the color type.

Custom Icon

This alert uses a custom settings icon.

Hidden Icon

This alert has no icon displayed.

razor

<FodAlert Color="AlertColor.Info">
    <Icon>
        <FodIcon Icon="IconName.Settings"/>
    </Icon>
    <ChildContent>
        This alert uses a custom settings icon.
    </ChildContent>
</FodAlert>

<FodAlert Color="AlertColor.Info" HideIcon="true">
    This alert has no icon displayed.
</FodAlert>

With Actions

Add action buttons to alerts using the Action render fragment.

Single Action

Unable to establish a connection to the server.

Retry

Multiple Actions

You have unsaved changes. Do you want to save before leaving?

Save

Discard

razor

<FodAlert Color="AlertColor.Error" Title="Connection Failed">
    <ChildContent>
        Unable to establish a connection to the server.
    </ChildContent>
    <Action>
        <FodButton Type="FodColor.Destructive" Size="Size.Small"
                   Variant="ButtonVariant.Text" OnClick="HandleRetry">
            Retry
        </FodButton>
    </Action>
</FodAlert>

Dismissible

Enable the close button with Dismissible parameter. Use OnDismiss callback to react to dismissal.

Dismissible Info

Click the close button to dismiss this alert.

Dismissible Success

Your file has been uploaded successfully.

Dismissible Warning

You are running low on storage space.

Dismissible Error

An error occurred while processing your request.

razor

<FodAlert Color="AlertColor.Info" Dismissible="true" OnDismiss="HandleDismiss">
    Click the close button to dismiss this alert.
</FodAlert>

@code {
    private void HandleDismiss()
    {
        Console.WriteLine("Alert was dismissed");
    }
}

Controlled Visibility

Use Visible parameter with two-way binding to control alert visibility programmatically.

Controls

Show Alert

Hide Alert

Toggle

Current State: Visible

This alert's visibility is controlled by the buttons above. You can also dismiss it using the close button.

razor

<FodButton OnClick="@(() => showAlert = true)">Show Alert</FodButton>
<FodButton OnClick="@(() => showAlert = false)">Hide Alert</FodButton>

<FodAlert Color="AlertColor.Info"
          Dismissible="true"
          @bind-Visible="showAlert">
    This alert visibility is controlled programmatically.
</FodAlert>

@code {
    private bool showAlert = true;
}

Accessibility

Alerts automatically set appropriate ARIA roles based on severity. Info and Success use role=status with aria-live=polite. Warning and Error use role=alert with aria-live=assertive.

Info (role=status, aria-live=polite)

Informational alerts use polite announcements.

Error (role=alert, aria-live=assertive)

Error alerts use assertive announcements for immediate attention.

Custom Role Override

This info alert uses role=alert instead of the default role=status.

razor

<FodAlert Color="AlertColor.Info" Role="alert">
    Custom role override
</FodAlert>

API Reference

Complete list of FodAlert component parameters.

No properties defined.