Live examples and demonstrations
Inlay Alerts are versatile, accessible notification components that provide contextual feedback to users. They support multiple types (success, danger, warning, info, default), can be styled with various drop shadows, and include auto-closing functionality with progress indicators. All alerts are ADA-compliant with proper ARIA labels, keyboard navigation, and screen reader support.
Get up and running in 5 minutes with our Quick Start Guide!
View Quick Start Guide.alert-success — Green background for successful actions.alert-danger — Red background for errors or critical warnings.alert-warning — Yellow background for warnings.alert-info — Cyan background for informational messages.alert-default — Gray background for neutral messages
.alert-dropshadow-a — Inset shadow for depth effect.alert-dropshadow-b — Multi-layer shadow for dramatic effect.alert-dropshadow-c — Subtle inset shadow.alert-dropshadow-d — Standard box shadow
Static alerts are pre-rendered HTML elements that are present on page load. They include a close button that allows users to dismiss them.
Add depth and visual interest to your alerts using the drop shadow classes.
Provide more context with title and detail combinations.
Use the generateAlert() function to create alerts programmatically with custom options.
// Basic alert
generateAlert({
type: 'success',
message: 'Success!',
details: 'Your operation completed successfully.',
location: '#dynamicAlertContainer'
});
// Alert with custom styling
generateAlert({
type: 'info',
message: 'Custom Alert',
details: 'This alert has custom colors and icon.',
location: '#dynamicAlertContainer',
dropShadow: 'alert-dropshadow-c',
overrideIcon: 'fa-star',
overrideBackgroundColor: '#9b59b6',
overrideTextColor: '#ffffff'
});
// Auto-closing alert with timeout
generateAlert({
type: 'warning',
message: 'Auto-Close',
details: 'This alert will close after 3 seconds.',
location: '#dynamicAlertContainer',
timeout: 3000
});
// Alert with callbacks
generateAlert({
type: 'info',
message: 'With Callbacks',
details: 'This alert has onShow and onClose callbacks.',
location: '#dynamicAlertContainer',
onShow: function() {
console.log('Alert shown!');
},
onClose: function() {
console.log('Alert closed!');
}
});
The generateAlert() function accepts an object with the following properties:
type - Alert type: 'success', 'danger', 'warning', 'info', or 'default'message - Main heading text for the alertdetails - Detailed message textlocation - CSS selector for container (#id or .class)dropShadow - Shadow class: 'alert-dropshadow-a', 'b', 'c', or 'd'wrapMessage - Wrap details in styled container: 'true' or 'false'animation - CSS animation class to applyoverrideIcon - FontAwesome icon class (e.g., 'fa-user')overrideBackgroundColor - Custom background color (hex, rgb, or color name)overrideTextColor - Custom text coloroverrideTitleColor - Custom title coloroverrideIconColor - Custom icon coloroverrideCloseColor - Custom close button colortimeout - Auto-close after X millisecondsonShow - Callback function when alert is shownonClose - Callback function when alert is closedInlay alerts work seamlessly within RSL's grid system, making them perfect for dashboard notifications or form validation.
Inlay Alerts are designed with accessibility in mind, ensuring all users can interact with notifications effectively.
role="alert" - Announces the alert to screen readersaria-label - Provides descriptive label with alert type and contentaria-hidden="true" on icons - Prevents redundant icon announcementsaria-label="Close" on buttons - Clear close button labeling