# Alert

Source: https://lumeo.nativ.sh/components/alert

# Alert

Displays a callout for important messages and feedback.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Alert />

## When to Use

-   Display important messages that require user attention inline on the page
-   Show status notifications such as success, warning, or error feedback
-   Communicate system-wide announcements or feature changes
-   Provide contextual warnings before a destructive or irreversible action
-   Surface validation errors or informational tips within a form

Preview Code

Default

##### Heads up!

You can add components to your app using the CLI.

Preview Code

Destructive

##### Error

Your session has expired. Please log in again.

Preview Code

With Icon

##### Information

This action will update your preferences.

##### Something went wrong

Could not save your changes. Please try again.

Preview Code

With Action

##### New feature available

Dark mode is now available for all users. Try it out in Settings.

Try it

##### Subscription expired

Your subscription has expired. Renew to continue using premium features.

Renew

Preview Code

Dismissible

##### Welcome to Lumeo!

Get started by exploring the components and patterns library.

Preview Code

Dismissible (IsDismissible)

Heads up!

This alert can be dismissed.

Preview Code

All Variants

Success!

Operation completed.

Warning

Please review before continuing.

Info

Here's some helpful information.

Preview Code

Variant — interactive

Pick a variant to see it applied live.

DefaultDestructiveSuccessWarningInfo

Default alert

This is a default message.

Preview Code

Size — interactive

Pick a size to see it applied live.

SmallMediumLarge

Medium size

This alert uses the medium size.

## Keyboard Interactions

Key

Action

Escape

Dismiss the alert when it is dismissible

Tab

Move focus to action buttons or the dismiss button inside the alert

Enter

Activate the focused action or dismiss button

## Parameter Coverage

Every AlertVariant value plus the icon-toggle bool demoed live.

### AlertVariant

Default

Default alert

An example alert in the Default variant.

Destructive

Destructive alert

An example alert in the Destructive variant.

Success

Success alert

An example alert in the Success variant.

Warning

Warning alert

An example alert in the Warning variant.

Info

Info alert

An example alert in the Info variant.

### ShowIcon

ShowIcon = false

No icon

ShowIcon is false.

ShowIcon = true

With icon

ShowIcon is true.

### IsDismissible

IsDismissible = false

Sticky

Cannot be dismissed.

IsDismissible = true

Dismissible

Click the X to dismiss.

## API Reference

### Alert

Property

Type

Default

Description

Variant

AlertVariant

Default

Visual style of the alert. Values: Default, Destructive, Success, Warning, Info.

IsDismissible

bool

false

When true, renders a close button inside the alert.

OnDismiss

EventCallback

—

Callback invoked when the dismiss button is clicked.

Title

string?

null

Optional heading text. Can also be provided via the AlertTitle child.

Description

string?

null

Optional body text. Can also be provided via the AlertDescription child.

ShowIcon

bool

true

Whether to render the leading icon for the variant.

IconContent

RenderFragment?

null

Custom icon slot that overrides the default variant icon.

AutoDismissMs

int?

null

When set, the alert dismisses itself after this many milliseconds.

Size

AlertSize

Medium

Controls padding and text size. Values: Small, Medium, Large.

ChildContent

RenderFragment?

null

Custom content rendered inside the alert body.

## Related Components

-   [Toast](/components/toast) — Use for transient notifications that auto-dismiss, rather than persistent inline alerts
-   [Dialog](/components/dialog) — Use when the message requires explicit user acknowledgement or a decision
-   [Badge](/components/badge) — Use for small inline status labels rather than full callout blocks