Alerts

Contextual Alerts

Choose from eight contextual alert styles to convey different message types. Each style provides distinct visual cues through color and icons, helping users quickly understand the nature and importance of the message. Use alert-primary, alert-success, etc. classes to apply different styles based on the message context:

• Primary/Secondary: General information and system messages
• Success: Confirmation of completed actions or positive outcomes
• Danger: Critical errors, failures, or actions requiring immediate attention
• Warning: Potential issues or actions requiring caution
• Info: Helpful information, tips, or announcements
• Light/Dark: Subtle notifications or high-contrast messages

Interactive Alerts

Enhance alerts with interactive elements using the .alert-link class. This maintains consistent styling while providing clear call-to-action opportunities within your alerts. Links automatically inherit the alert's color scheme for seamless integration, creating a cohesive visual experience while enabling users to take immediate action based on the notification.

Rich Content Alerts

Create more engaging and informative alerts by incorporating rich content such as headings, lists, badges, and icons. These elements help structure information hierarchically and highlight key details within the alert context. Rich content alerts are particularly useful for complex notifications that require more explanation or contain multiple pieces of related information.

Dismissible Alerts

Add the alert-dismissible class and dismiss button to create closeable alerts. These are perfect for temporary notifications that users can acknowledge and remove when no longer needed. Include the fade and show classes for smooth transition effects. Dismissible alerts give users control over their interface while ensuring important messages are seen.

Live Alert Example

Create dynamic alerts that respond to user interactions using JavaScript. This example demonstrates how to show an alert (hidden initially) when a button is clicked, then dismiss it with the built-in close button. This pattern is useful for providing feedback after user actions without requiring a page refresh.

Custom Styled Alerts

Create visually distinctive alerts by combining utility classes with the base alert component. This example demonstrates alerts with left borders, custom icon containers, and enhanced visual hierarchy. Custom styling can help establish different levels of importance or categorize alerts within your interface while maintaining accessibility and usability.