Alert â Vanilla
Alerts with vanilla HTML + optional JS for dismiss. Ensure Rizzo CSS is loaded.
Alert
Accessible alerts with success, error, warning, info variants. Add alert__close and data-alert-close for dismissible; use JS to remove the element.
Variants (show on click)
Click the buttons below to see each variant in action:
Live examples
Auto-dismiss
Alerts can automatically dismiss after a set duration:
Auto-dismiss examples
Static examples
Inline alerts
Success message.
Error message.
Warning message.
Dismissible info alert.
HTML
html html
<div class="alert alert--info" role="alert" aria-live="polite" aria-label="Information message">
<div class="alert__content">Information message here.</div>
</div>
<div class="alert alert--success" role="alert" aria-live="polite" aria-label="Success message">
<div class="alert__content">Success! Saved.</div>
</div>
<!-- Dismissible: add close button and wire with JS -->
<div class="alert alert--error" id="alert-dismiss-demo" role="alert" aria-live="polite" aria-label="Error message">
<div class="alert__content">Dismissible error. Click X to close.</div>
<button type="button" class="alert__close" aria-label="Dismiss alert" data-alert-close aria-controls="alert-dismiss-demo">✕</button>
</div>JavaScript (dismissible)
javascript javascript
document.querySelectorAll('[data-alert-close]').forEach(function(btn) {
btn.addEventListener('click', function() {
var id = btn.getAttribute('aria-controls');
var el = id ? document.getElementById(id) : btn.closest('.alert');
if (el) el.remove();
});
});