← Back to Components

Alert

Contextual notification component with multiple variants for communicating important information to users

Alert Variants

This is an informational message to help users understand something important.

Blue background with info-circle icon for neutral information

Your changes have been saved successfully. All data is up to date.

Green background with check-circle icon for positive feedback

Please review your information before proceeding. Some fields may need attention.

Yellow/orange background with warning-triangle icon for cautionary messages

Unable to save your changes. Please check your connection and try again.

Red background with close-circle icon for error messages

This alert can be dismissed by clicking the close button.

Task completed successfully! You can dismiss this message.

When onDismiss prop is provided, alerts become dismissible with close button

Form validation failed: Please fill in all required fields before submitting.

Error alerts for form validation feedback

Scheduled maintenance: The system will be unavailable for updates from 2:00-3:00 AM EST tonight.

Warning alerts for system announcements and maintenance notices

Feedback request sent successfully to 3 reviewers.

Success alerts with dismissible option for action confirmations