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="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>

Dismissable RzAlert

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

Source

<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>

Pulsed RzAlert

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

Source

<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>

RzAlert Component Parameters

Property	Description	Type	Default
`Variant`	`ThemeVariant` enum – Determines the visual style and color scheme of the alert. Options include: `Information`, `Success`, `Warning`, `Destructive`, and `Accent`.	`ThemeVariant`	`ThemeVariant.Information`
`Icon`	`SvgIcon?` – The icon displayed in the alert. If null, a default icon based on the variant will be used automatically.	`SvgIcon?`	`null`
`Dismissable`	`bool` – When set to true, displays a close button that allows users to dismiss the alert.	`bool`	`false`
`ChildContent`	`RenderFragment?` – The content to be displayed inside the alert, typically including `AlertTitle` and `AlertDescription` components.	`RenderFragment?`	`null`
`Pulse`	`bool` – When set to true, displays a pulsing animation behind the icon for emphasis.	`bool`	`false`

AlertTitle Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment?` – The text content of the alert title.	`RenderFragment?`	`null`

AlertDescription Component Parameters

Property	Description	Type	Default
`ChildContent`	`RenderFragment?` – The text content of the alert description.	`RenderFragment?`	`null`

Alpine API

This page uses the rzAlert Alpine x-data component.

Method	Parameters	Description
`dismiss`	`—`	Dismisses the alert and updates local visible state.