- {/* Alert Variants */}
-
-
- Alert Variants
-
- All available alert variants with their default styling and colors
-
-
-
-
-
- Default Alert
-
- This is a default alert with neutral styling. Use for general information.
-
-
-
-
- Secondary Alert
-
- This is a secondary alert with muted styling. Use for less prominent messages.
-
-
-
-
- Outline Alert
-
- This is an outline alert with a border and transparent background. Use for subtle
- notifications.
-
-
-
-
- Destructive Alert
-
- This is a destructive alert for errors and critical issues. Use for error messages
- and warnings.
-
-
-
-
- Success Alert
-
- This is a success alert for positive feedback. Use when operations complete
- successfully.
-
-
-
-
- Info Alert
-
- This is an info alert for informational messages. Use to provide helpful context or
- guidance.
-
-
-
-
- Warning Alert
-
- This is a warning alert for cautionary messages. Use when action is required or
- attention is needed.
-
-
-
-
-
-
- {/* Alerts with Icons */}
-
-
- Alerts with Icons
-
- Icons are automatically positioned when placed as the first child of the Alert component
-
-
-
-
-
-
- Error Occurred
-
- An error occurred while processing your request. Please try again or contact
- support.
-
-
-
-
-
- Operation Successful
-
- Your changes have been saved successfully. All data has been updated.
-
-
-
-
-
- Information
-
- Here's some helpful information that might be useful for you to know.
-
-
-
-
-
- Warning
-
- Please review this information before proceeding. This action cannot be undone.
-
-
-
-
-
- Notification
-
- You have a new notification. Check your inbox for more details.
-
-
-
-
-
- Security Notice
-
- Your account security settings have been updated. Review your security preferences.
-
-
-
-
-
- Icons are automatically positioned in the top-left corner and content is padded
- accordingly. Icon colors inherit from the alert variant.
-
-
-
-
-
- {/* Status Alerts */}
-
-
- Status Alerts
- Common status alert patterns for different scenarios
-
-
-
-
-
- Connection Established
-
- Your connection has been established successfully. You can now proceed with your
- operations.
-
-
-
-
-
- Connection Failed
-
- Unable to establish connection. Please check your network settings and try again.
-
-
-
-
-
- Action Required
-
- Your account requires verification. Please complete the verification process to
- continue.
-
-
-
-
-
- Processing
-
- Your request is being processed. This may take a few moments. Please wait.
-
-
-
The following issues must be resolved before your domain can be verified:
-
-
DNS records are not configured correctly
-
HTTP verification token is missing
-
Domain ownership could not be verified
-
-
-
-
-
-
-
- Before You Continue
-
-
-
Please review the following before proceeding:
-
-
Verify all required fields are completed
-
Check that your configuration is correct
-
Ensure you have the necessary permissions
-
-
-
-
-
-
-
- System Update
-
-
-
- A new system update is available. The update includes the following
- improvements:
-
-
-
Enhanced security features
-
Performance optimizations
-
New user interface improvements
-
-
- Note: The update will be applied automatically during the next
- maintenance window.
-
-
-
-
-
-
-
-
- {/* Simple Alerts */}
-
-
- Simple Alerts
-
- Alerts can be used without titles or with minimal content for simple notifications
-
-
-
-
-
- This is a simple alert without a title.
-
-
-
- Operation completed successfully.
-
-
-
- Please review your settings before continuing.
-
-
-
- An error occurred. Please try again.
-
-
-
-
- Your changes have been saved.
-
-
-
-
-
- New features are available. Check the documentation for more information.
-
-
-
-
-
-
- {/* Closable Alerts */}
-
-
- Closable Alerts
-
- Alerts can be made dismissible by setting the closable prop. Click the X button to close
- them.
-
-
-
-
- alert('Close button clicked!')}>
-
- Dismissible Info Alert
-
- This alert has a close button. Click the X in the top-right corner to dismiss it. In
- a real application, you would handle the onClose callback to remove the alert from
- state.
-
-
-
- alert('Close button clicked!')}>
-
- Dismissible Success Alert
-
- Success alerts can also be closable. The close button inherits the alert's
- color scheme.
-
-
-
- alert('Close button clicked!')}>
-
- Dismissible Warning Alert
-
- Warning alerts with close buttons are useful for temporary notifications that users
- can dismiss.
-
-
-
- alert('Close button clicked!')}>
-
- Dismissible Error Alert
-
- Even error alerts can be dismissible, allowing users to acknowledge and dismiss
- error messages.
-
-
-
-
-
-
Multiple Closable Alerts (Interactive)
-
- Click the X button on any alert below to remove it from the list:
-
- All alerts have been dismissed. Refresh the page to see them again.
-
- )}
-
-
-
-
-
- Note: By default, alerts are not closable. Set the{' '}
- closable prop to true and provide an onClose{' '}
- callback to enable the close button.
-
-
-
-
-
- {/* Use Cases */}
-
-
- Common Use Cases
- Real-world examples of Alert component usage
-
-
-
-
Form Validation Errors
-
-
- Validation Failed
-
- Please correct the following errors before submitting:
-
-
Email address is required
-
Password must be at least 8 characters
-
-
-
-
-
-
-
Success Messages
-
-
- Profile Updated
-
- Your profile information has been successfully updated and saved.
-
-
-
-
-
-
System Notifications
-
-
- Maintenance Scheduled
-
- System maintenance is scheduled for tonight at 2:00 AM. Some services may be
- temporarily unavailable.
-
-
-
-
-
-
Warning Messages
-
-
- Action Required
-
- Your subscription will expire in 7 days. Please renew to continue using all
- features.
-
-
-
-
-
-
Error Recovery
-
-
- Connection Lost
-
- Your connection was interrupted. Attempting to reconnect automatically. If this
- problem persists, please refresh the page.
-
-
-
-
-
-
In Dialog/Modal
-
-
-
- Confirm Action
-
- This action cannot be undone. Are you sure you want to proceed?
-
-
-
- Alerts work well in dialogs and modals to provide context for user actions.
-
+ {/* Alert Variants */}
+
+
+ Alert Variants
+
+ All available alert variants with their default styling and colors
+
+
+
+
+
+ Default Alert
+
+ This is a default alert with neutral styling. Use for general information.
+
+
+
+
+ Secondary Alert
+
+ This is a secondary alert with muted styling. Use for less prominent messages.
+
+
+
+
+ Outline Alert
+
+ This is an outline alert with a border and transparent background. Use for subtle
+ notifications.
+
+
+
+
+ Destructive Alert
+
+ This is a destructive alert for errors and critical issues. Use for error messages
+ and warnings.
+
+
+
+
+ Success Alert
+
+ This is a success alert for positive feedback. Use when operations complete
+ successfully.
+
+
+
+
+ Info Alert
+
+ This is an info alert for informational messages. Use to provide helpful context or
+ guidance.
+
+
+
+
+ Warning Alert
+
+ This is a warning alert for cautionary messages. Use when action is required or
+ attention is needed.
+
+
+
+
+
+
+ {/* Alerts with Icons */}
+
+
+ Alerts with Icons
+
+ Icons are automatically positioned when placed as the first child of the Alert component
+
+
+
+
+
+
+ Error Occurred
+
+ An error occurred while processing your request. Please try again or contact
+ support.
+
+
+
+
+
+ Operation Successful
+
+ Your changes have been saved successfully. All data has been updated.
+
+
+
+
+
+ Information
+
+ Here's some helpful information that might be useful for you to know.
+
+
+
+
+
+ Warning
+
+ Please review this information before proceeding. This action cannot be undone.
+
+
+
+
+
+ Notification
+
+ You have a new notification. Check your inbox for more details.
+
+
+
+
+
+ Security Notice
+
+ Your account security settings have been updated. Review your security preferences.
+
+
+
+
+
+ Icons are automatically positioned in the top-left corner and content is padded
+ accordingly. Icon colors inherit from the alert variant.
+
+
+
+
+
+ {/* Status Alerts */}
+
+
+ Status Alerts
+ Common status alert patterns for different scenarios
+
+
+
+
+
+ Connection Established
+
+ Your connection has been established successfully. You can now proceed with your
+ operations.
+
+
+
+
+
+ Connection Failed
+
+ Unable to establish connection. Please check your network settings and try again.
+
+
+
+
+
+ Action Required
+
+ Your account requires verification. Please complete the verification process to
+ continue.
+
+
+
+
+
+ Processing
+
+ Your request is being processed. This may take a few moments. Please wait.
+
+
+
The following issues must be resolved before your domain can be verified:
+
+
DNS records are not configured correctly
+
HTTP verification token is missing
+
Domain ownership could not be verified
+
+
+
+
+
+
+
+ Before You Continue
+
+
+
Please review the following before proceeding:
+
+
Verify all required fields are completed
+
Check that your configuration is correct
+
Ensure you have the necessary permissions
+
+
+
+
+
+
+
+ System Update
+
+
+
+ A new system update is available. The update includes the following
+ improvements:
+
+
+
Enhanced security features
+
Performance optimizations
+
New user interface improvements
+
+
+ Note: The update will be applied automatically during the next
+ maintenance window.
+
+
+
+
+
+
+
+
+ {/* Simple Alerts */}
+
+
+ Simple Alerts
+
+ Alerts can be used without titles or with minimal content for simple notifications
+
+
+
+
+
+ This is a simple alert without a title.
+
+
+
+ Operation completed successfully.
+
+
+
+ Please review your settings before continuing.
+
+
+
+ An error occurred. Please try again.
+
+
+
+
+ Your changes have been saved.
+
+
+
+
+
+ New features are available. Check the documentation for more information.
+
+
+
+
+
+
+ {/* Closable Alerts */}
+
+
+ Closable Alerts
+
+ Alerts can be made dismissible by setting the closable prop. Click the X button to close
+ them.
+
+
+
+
+ alert('Close button clicked!')}>
+
+ Dismissible Info Alert
+
+ This alert has a close button. Click the X in the top-right corner to dismiss it. In
+ a real application, you would handle the onClose callback to remove the alert from
+ state.
+
+
+
+ alert('Close button clicked!')}>
+
+ Dismissible Success Alert
+
+ Success alerts can also be closable. The close button inherits the alert's
+ color scheme.
+
+
+
+ alert('Close button clicked!')}>
+
+ Dismissible Warning Alert
+
+ Warning alerts with close buttons are useful for temporary notifications that users
+ can dismiss.
+
+
+
+ alert('Close button clicked!')}>
+
+ Dismissible Error Alert
+
+ Even error alerts can be dismissible, allowing users to acknowledge and dismiss
+ error messages.
+
+
+
+
+
+
Multiple Closable Alerts (Interactive)
+
+ Click the X button on any alert below to remove it from the list:
+
+ All alerts have been dismissed. Refresh the page to see them again.
+
+ )}
+
+
+
+
+
+ Note: By default, alerts are not closable. Set the{' '}
+ closable prop to true and provide an onClose{' '}
+ callback to enable the close button.
+
+
+
+
+
+ {/* Use Cases */}
+
+
+ Common Use Cases
+ Real-world examples of Alert component usage
+
+
+
+
Form Validation Errors
+
+
+ Validation Failed
+
+ Please correct the following errors before submitting:
+
+
Email address is required
+
Password must be at least 8 characters
+
+
+
+
+
+
+
Success Messages
+
+
+ Profile Updated
+
+ Your profile information has been successfully updated and saved.
+
+
+
+
+
+
System Notifications
+
+
+ Maintenance Scheduled
+
+ System maintenance is scheduled for tonight at 2:00 AM. Some services may be
+ temporarily unavailable.
+
+
+
+
+
+
Warning Messages
+
+
+ Action Required
+
+ Your subscription will expire in 7 days. Please renew to continue using all
+ features.
+
+
+
+
+
+
Error Recovery
+
+
+ Connection Lost
+
+ Your connection was interrupted. Attempting to reconnect automatically. If this
+ problem persists, please refresh the page.
+
+
+
+
+
+
In Dialog/Modal
+
+
+
+ Confirm Action
+
+ This action cannot be undone. Are you sure you want to proceed?
+
+
+
+ Alerts work well in dialogs and modals to provide context for user actions.
+