skip to the main content

Alert

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

Default Alert

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

Dismissable Alert

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

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

Pulsed Alert

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

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