ConstThe Alert component supports multiple status variants (info, success, warning, danger) and can display icons, loading states, and custom actions. It automatically handles icon selection based on status when the icon prop is set to true.
Basic usage with title only:
<Alert status="info" title="This is an informational message" />
With title and description:
<Alert
status="warning"
icon={true}
title="Pending Review"
description="Please review the following items before proceeding."
/>
With custom actions and loading state:
<Alert
status="success"
icon={true}
title="Operation completed"
description="Your changes have been saved successfully."
loading={isProcessing}
customActions={
<>
<Button size="small" variant="tertiary">Dismiss</Button>
<Button size="small" variant="primary">View</Button>
</>
}
/>
A component for displaying alert messages with different status levels.