Alert
Alert
Displays a callout for important messages that attract user attention.
Basic
A simple alert with an icon, title, and description.
Heads up!
You can add components to your app using the CLI.
Variants
Seven semantic variants for different message types.
Default
A standard alert for general informational messages.
Muted
A subtle alert with neutral gray accent for less prominent messages.
Destructive
Error message following shadcn/ui design system conventions.
Success
Your changes have been saved successfully.
Information
This feature is currently in beta. Some functionality may change.
Warning
Your account is approaching its storage limit.
Danger
Your session has expired. Please log in again.
With Accent Border
Use AccentBorder="true" to display a thick left border with a subtle tinted background.
Success with Accent
The accent border makes this success message more prominent.
Important Note
Each component has its own namespace (e.g.,
BlazorUI.Components.Button). Import only the components you use.
Tip
You can customize theme colors by modifying the CSS variables in your theme file.
Critical Warning
This action will permanently delete all data and cannot be undone.
Without Icons
Alerts can be used without icons for simpler messages.
Heads up!
You can add components to your app using the CLI.
Note
Remember to save your work before leaving the page.
Error
Your session has expired. Please log in again.
Accessibility
The Alert component uses the ARIA role="alert" attribute to announce important messages to screen readers.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Variant | AlertVariant | Default | Visual style variant. Options: Default, Muted, Destructive, Success, Info, Warning, Danger. |
| AccentBorder | bool | false | When true, displays a thick left border in the variant's accent color with a subtle tinted background. |
| Icon | RenderFragment? | — | Optional icon slot rendered to the left of the content. |
| ChildContent | RenderFragment? | — | Alert body. Nest AlertTitle and AlertDescription here. |
| Class | string? | — | Additional CSS classes appended to the root element. |