Alert
Displays a callout for important messages and feedback.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
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
Heads up!
You can add components to your app using the CLI.
Error
Your session has expired. Please log in again.
Information
This action will update your preferences.
Something went wrong
Could not save your changes. Please try again.
New feature available
Dark mode is now available for all users. Try it out in Settings.
Subscription expired
Your subscription has expired. Renew to continue using premium features.
Welcome to Lumeo!
Get started by exploring the components and patterns library.
Heads up!
This alert can be dismissed.
Success!
Operation completed.
Warning
Please review before continuing.
Info
Here's some helpful information.
Pick a variant to see it applied live.
Default alert
This is a default message.
Pick a size to see it applied live.
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 alert
Destructive alert
Success alert
Warning alert
Info alert
ShowIcon
ShowIcon = false
No icon
ShowIcon = true
With icon
IsDismissible
IsDismissible = false
Sticky
IsDismissible = true
Dismissible
API Reference
Alert
Density falls back to an ancestor DensityScope, then Comfortable. See the Density guide.