RzAlert
RzAlert renders inline feedback for important page messages, validation outcomes, and saved-status confirmations. It uses Alpine for optional dismissal only; the component remains SSR-rendered and does not require Blazor runtime interactivity. An alert with an icon, title, and message allows you to inform users about critical updates or changes in the system. You can dismiss the icon if Dismissable is set. An alert with an icon, title, and message that can be dismissed by the user. Use An alert with an icon, title, and message that has a pulsing icon animation. By default, RzAlert renders For nonurgent confirmations or status updates, set When RzAlert is not a toast system. Use it for inline page feedback that is present in the document flow. Do not use it for transient queued notifications, timed popups, or viewport-positioned toast stacks. This page uses the <RzAlert Variant="ThemeVariant.Accent">
<AlertTitle>Accent RzAlert</AlertTitle>
<AlertDescription>Your post will be moderated before it is approved.</AlertDescription>
</RzAlert>
<RzAlert Variant="ThemeVariant.Information">
<AlertTitle>Update Available</AlertTitle>
<AlertDescription>A new version is available. Please update to the latest version.</AlertDescription>
</RzAlert>
<RzAlert Variant="ThemeVariant.Success">
<AlertTitle>Successfully Subscribed</AlertTitle>
<AlertDescription>Success! You've subscribed to our newsletter. Welcome aboard!</AlertDescription>
</RzAlert>
<RzAlert Variant="ThemeVariant.Warning">
<AlertTitle>Credit Card Expires Soon</AlertTitle>
<AlertDescription>Your credit card expires soon. Please update your payment information.</AlertDescription>
</RzAlert>
<RzAlert Variant="ThemeVariant.Destructive">
<AlertTitle>Invalid Email Address</AlertTitle>
<AlertDescription>The email address you entered is invalid. Please try again.</AlertDescription>
</RzAlert><RzAlert Variant="ThemeVariant.Information" Dismissable>
<AlertTitle>Update Available</AlertTitle>
<AlertDescription>A new version is available. Please update to the latest version.</AlertDescription>
</RzAlert>
<RzAlert Variant="ThemeVariant.Success" Dismissable>
<AlertTitle>Successfully Subscribed</AlertTitle>
<AlertDescription>Success! You've subscribed to our newsletter. Welcome aboard!</AlertDescription>
</RzAlert>
<RzAlert Variant="ThemeVariant.Warning" Dismissable>
<AlertTitle>Credit Card Expires Soon</AlertTitle>
<AlertDescription>Your credit card expires soon. Please update your payment information.</AlertDescription>
</RzAlert>
<RzAlert Variant="ThemeVariant.Destructive" Dismissable>
<AlertTitle>Invalid Email Address</AlertTitle>
<AlertDescription>The email address you entered is invalid. Please try again.</AlertDescription>
</RzAlert>LiveRegionMode="RzAlertLiveRegionMode.Status" for nonurgent inline status messages such as saved confirmations. This renders polite role="status" semantics instead of interruptive alert semantics.<RzAlert Variant="ThemeVariant.Success" LiveRegionMode="RzAlertLiveRegionMode.Status">
<AlertTitle>Preferences saved</AlertTitle>
<AlertDescription>Your notification settings were saved successfully.</AlertDescription>
</RzAlert><RzAlert Variant="ThemeVariant.Information" Pulse>
<AlertTitle>Update Available</AlertTitle>
<AlertDescription>A new version is available. Please update to the latest version.</AlertDescription>
</RzAlert>
<RzAlert Variant="ThemeVariant.Success" Pulse>
<AlertTitle>Successfully Subscribed</AlertTitle>
<AlertDescription>Success! You've subscribed to our newsletter. Welcome aboard!</AlertDescription>
</RzAlert>
<RzAlert Variant="ThemeVariant.Warning" Pulse>
<AlertTitle>Credit Card Expires Soon</AlertTitle>
<AlertDescription>Your credit card expires soon. Please update your payment information.</AlertDescription>
</RzAlert>
<RzAlert Variant="ThemeVariant.Destructive" Pulse>
<AlertTitle>Invalid Email Address</AlertTitle>
<AlertDescription>The email address you entered is invalid. Please try again.</AlertDescription>
</RzAlert>Property Description Type Default VariantThemeVariant enum – Determines the visual style and color scheme of the alert. Options include: Information, Success, Warning, Destructive, and Accent.ThemeVariantThemeVariant.InformationIconSvgIcon? – The icon displayed in the alert. If null, a default icon based on the variant will be used automatically.SvgIcon?nullDismissablebool – When set to true, displays a close button that allows users to dismiss the alert.boolfalseLiveRegionModeRzAlertLiveRegionMode – Selects the assistive technology announcement behavior. Use Alert for urgent assertive messages and Status for nonurgent polite updates.RzAlertLiveRegionModeRzAlertLiveRegionMode.AlertChildContentRenderFragment? – The content to be displayed inside the alert, typically including AlertTitle and AlertDescription components.RenderFragment?nullPulsebool – When set to true, displays a pulsing animation behind the icon for emphasis.boolfalseProperty Description Type Default ChildContentRenderFragment? – The text content of the alert title.RenderFragment?nullProperty Description Type Default ChildContentRenderFragment? – The text content of the alert description.RenderFragment?nullrole="alert" with aria-live="assertive" for urgent messages that require immediate attention. The live region is atomic so assistive technologies announce the complete alert message when it appears or changes.LiveRegionMode="RzAlertLiveRegionMode.Status". Status mode renders role="status" with aria-live="polite", which avoids interrupting the current screen reader task and reduces announcement noise. Do not place the same message in another live region at the same time.Dismissable is enabled, the close control remains a real button with the localized accessible name from RzAlert.CloseButtonAriaLabel. Keyboard behavior follows native button semantics: Tab can move focus to the close button, and Enter or Space activates it. Activating the button calls the dismiss Alpine method, hides the alert locally, and does not move focus, trap focus, or restore focus because an inline alert is not a modal surface. The decorative icon container and close icon are hidden from assistive technologies with aria-hidden="true".rzAlert Alpine x-data component.Method Parameters Description dismiss—Dismisses the alert and updates local visible state without moving focus.