Alert Component

Displays a callout for important messages that attract user attention.

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, BlazorUI.Components.Dialog). Import only the components you use to keep your imports clean.

Tip

You can customize the 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.

Variant

Type: AlertVariant — Default: Default

The visual style variant. Options: Default, Muted, Destructive, Success, Info, Warning, Danger.

AccentBorder

Type: bool — Default: false

When true, displays a thick left border in the variant's accent color with a subtle tinted background.

Icon

Type: RenderFragment?

Optional icon to display in the alert.

Class

Type: string?

Additional CSS classes to apply to the alert.