Alerts
Overview
Alerts in the Phenix Design System are built using utility classes to create flexible, customizable notification components. They provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.
Basic Alerts
Create basic alerts using the alert-box
class combined with utility classes for padding, borders, background colors, and spacing:
<!-- Basic Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-offwhite-gray mb-15">
<strong>Alert:</strong> This is a standard gray alert.
</div>
<!-- Warning Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-offwhite-warning mb-15">
<strong>Warning:</strong> This is a warning alert with light background.
</div>
<!-- Success Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-offwhite-success mb-15">
<strong>Success:</strong> This is a success alert with light background.
</div>
<!-- Info Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-offwhite-info mb-15">
<strong>Info:</strong> This is an info alert with light background.
</div>
<!-- Danger Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-offwhite-danger mb-15">
<strong>Danger:</strong> This is a danger alert with light background.
</div>
Colorful Alerts
For more vibrant alerts, use the full-color background utility classes with appropriate text colors:
<!-- Dark Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-dark mb-15 color-white">
<strong>Dark:</strong> This is a dark alert with white text.
</div>
<!-- Warning Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-warning mb-15 color-dark">
<strong>Warning:</strong> This is a warning alert with dark text.
</div>
<!-- Success Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-success mb-15 color-white">
<strong>Success:</strong> This is a success alert with white text.
</div>
<!-- Info Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-info mb-15 color-white">
<strong>Info:</strong> This is an info alert with white text.
</div>
<!-- Danger Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-danger mb-15 color-white">
<strong>Danger:</strong> This is a danger alert with white text.
</div>
Dismissible Alerts
Add a close button to your alerts using the flexbox utilities and the remove-item
helper class:
<!-- Dismissible Warning Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-offwhite-warning mb-15 flexbox align-between">
<p class="mb-0"><strong>Warning:</strong> This alert can be dismissed.</p>
<a href="javascript:void(0);" class="remove-item fas fa-times color-inherit"></a>
</div>
<!-- Dismissible Danger Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-danger mb-15 color-white flexbox align-between">
<p class="mb-0"><strong>Danger:</strong> This alert can be dismissed.</p>
<a href="javascript:void(0);" class="remove-item fas fa-times color-inherit"></a>
</div>
Alerts with Icons
Enhance your alerts with icons for better visual cues:
<!-- Warning Alert with Icon -->
<div class="alert-box pdy-10 pdx-15 border-r-sm bg-offwhite-warning mb-15 flexbox align-between align-center-y">
<p class="mb-0">
<i class="far fa-exclamation-triangle fs-20 me-10"></i>
<strong>Warning:</strong> This is an alert with an icon.
</p>
<a href="javascript:void(0);" class="remove-item fas fa-times color-inherit"></a>
</div>
<!-- Danger Alert with Icon -->
<div class="alert-box pdy-10 pdx-15 border-r-sm bg-danger mb-15 color-white flexbox align-between align-center-y">
<p class="mb-0">
<i class="far fa-exclamation-circle fs-20 me-10"></i>
<strong>Danger:</strong> This is an alert with an icon.
</p>
<a href="javascript:void(0);" class="remove-item fas fa-times color-inherit"></a>
</div>
Customization
The alert component is built using utility classes, so you can customize it extensively:
Sizing and Spacing
- Use padding utilities (
pdy-*
,pdx-*
) to adjust internal spacing - Use margin utilities (
mb-*
,mt-*
, etc.) to adjust spacing between alerts - Use width utilities (
w-*
) to control the width of alerts
Colors and Styling
- Use background utilities (
bg-*
) to change the background color - Use text color utilities (
color-*
) to change the text color - Use border utilities (
border-*
) to add or modify borders - Use border-radius utilities (
border-r-*
) to adjust corner rounding
Layout
- Use flexbox utilities (
flexbox
,align-*
) to control the layout of alert content - Use grid utilities to place alerts within a grid system
Accessibility
For better accessibility, consider the following:
- Use appropriate color contrast between text and background
- Use
role="alert"
for important alerts that need to be announced by screen readers - Ensure dismissible alerts have accessible labels and can be operated by keyboard
<!-- Accessible Alert -->
<div class="alert-box pdy-15 pdx-20 border-r-sm bg-danger mb-15 color-white flexbox align-between" role="alert">
<p class="mb-0"><strong>Important:</strong> This is an accessible alert.</p>
<button type="button" class="remove-item fas fa-times color-inherit" aria-label="Close alert"></button>
</div>
JavaScript Integration
The dismissible alerts use the .remove-item
helper class, which is automatically handled by the Phenix JavaScript utilities. To ensure this functionality works, make sure the utilities are initialized:
// Initialize all utilities including item remover
Phenix(document).utilities();
// Or initialize just the item remover
Phenix(document).utilities({
type: 'remover'
});
Best Practices
- Use appropriate colors for different alert types to maintain consistent meaning across your application
- Keep alert messages concise and focused on a single piece of information
- Use icons sparingly to enhance understanding without cluttering the alert
- Make alerts dismissible when they're not critical to the user's current task
- Ensure sufficient contrast between text and background colors for readability