This is the alert title
<Alert title="This is the alert title" />Examples
Description
Use the description prop to provide additional context to the alert.
Invalid Fields
Your form has some errors. Please fix them and try again.
<Alert
status="error"
showIndicator
title="Invalid Fields"
description="Your form has some errors. Please fix them and try again."
/>Status
Change the status of the alerts by passing the status prop. This affects the color scheme and icon used. Alert supports error, success, warning, and info statuses.
There was an error processing your request
Hygge UI is going live on August 30th. Get ready!
Seems your account is about expire, upgrade now
Data uploaded to the server. Fire on!
<div className="flex flex-col gap-2">
<Alert
status="error"
showIndicator
description="There was an error processing your request"
/>
<Alert
status="info"
showIndicator
description="Hygge UI is going live on August 30th. Get ready!"
/>
<Alert
status="warning"
showIndicator
description="Seems your account is about expire, upgrade now"
/>
<Alert
status="success"
showIndicator
description="Data uploaded to the server. Fire on!"
/>
</div>