skip to the main content

RzAlert

RzAlerts allow you to communicate important information to users and offer feedback on their actions.

Default RzAlert

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.

Source
<RzAlert Variant="AlertVariant.Alternate">
    <AlertTitle>Alternate RzAlert</AlertTitle>
    <AlertDescription>Your post will be moderated before it is approved.</AlertDescription>
</RzAlert>
<RzAlert Variant="AlertVariant.Information">
    <AlertTitle>Update Available</AlertTitle>
    <AlertDescription>A new version is available. Please update to the latest version.</AlertDescription>
</RzAlert>
<RzAlert Variant="AlertVariant.Success">
    <AlertTitle>Successfully Subscribed</AlertTitle>
    <AlertDescription>Success! You've subscribed to our newsletter. Welcome aboard!</AlertDescription>
</RzAlert>
<RzAlert Variant="AlertVariant.Warning">
    <AlertTitle>Credit Card Expires Soon</AlertTitle>
    <AlertDescription>Your credit card expires soon. Please update your payment information.</AlertDescription>
</RzAlert>
<RzAlert Variant="AlertVariant.Danger">
    <AlertTitle>Invalid Email Address</AlertTitle>
    <AlertDescription>The email address you entered is invalid. Please try again.</AlertDescription>
</RzAlert>

Dismissable RzAlert

An alert with an icon, title, and message that can be dismissed by the user.

Source
<RzAlert Variant="AlertVariant.Information" Dismissable>
 <AlertTitle>Update Available</AlertTitle>
 <AlertDescription>A new version is available. Please update to the latest version.</AlertDescription>
</RzAlert>
<RzAlert Variant="AlertVariant.Success" Dismissable>
 <AlertTitle>Successfully Subscribed</AlertTitle>
 <AlertDescription>Success! You've subscribed to our newsletter. Welcome aboard!</AlertDescription>
</RzAlert>
<RzAlert Variant="AlertVariant.Warning" Dismissable>
 <AlertTitle>Credit Card Expires Soon</AlertTitle>
 <AlertDescription>Your credit card expires soon. Please update your payment information.</AlertDescription>
</RzAlert>
<RzAlert Variant="AlertVariant.Danger" Dismissable>
 <AlertTitle>Invalid Email Address</AlertTitle>
 <AlertDescription>The email address you entered is invalid. Please try again.</AlertDescription>
</RzAlert>

Pulsed RzAlert

An alert with an icon, title, and message that has a pulsing icon animation.

Source
<RzAlert Variant="AlertVariant.Information" Pulse>
    <AlertTitle>Update Available</AlertTitle>
    <AlertDescription>A new version is available. Please update to the latest version.</AlertDescription>
</RzAlert>
<RzAlert Variant="AlertVariant.Success" Pulse>
    <AlertTitle>Successfully Subscribed</AlertTitle>
    <AlertDescription>Success! You've subscribed to our newsletter. Welcome aboard!</AlertDescription>
</RzAlert>
<RzAlert Variant="AlertVariant.Warning" Pulse>
    <AlertTitle>Credit Card Expires Soon</AlertTitle>
    <AlertDescription>Your credit card expires soon. Please update your payment information.</AlertDescription>
</RzAlert>
<RzAlert Variant="AlertVariant.Danger" Pulse>
    <AlertTitle>Invalid Email Address</AlertTitle>
    <AlertDescription>The email address you entered is invalid. Please try again.</AlertDescription>
</RzAlert>

RzAlert Component Parameters

PropertyDescription
VariantAlertVariant – Determines the visual style and color scheme of the alert. Options include: Information, Success, Warning, Danger, and Alternate. The default value is Information.
IconSvgIcon? – The icon displayed in the alert. If null, a default icon based on the variant will be used automatically.
Dismissablebool – When set to true, displays a close button that allows users to dismiss the alert. Default is false.
ChildContentRenderFragment? – The content to be displayed inside the alert, typically including AlertTitle and AlertDescription components.
Pulsebool – When set to true, displays a pulsing animation behind the icon for emphasis. Default is false.

AlertTitle Component Parameters

PropertyDescription
ChildContentRenderFragment? – The text content of the alert title.

AlertDescription Component Parameters

PropertyDescription
ChildContentRenderFragment? – The text content of the alert description.