Skip to content
Docs / Components / Alerts

Alerts

Contextual feedback messages for user actions, status updates, and system notifications.

Basic Alerts

Four standard alert variants for different levels of feedback. Each includes an icon, title, and message for clear communication.

Info Alert
Scheduled Maintenance

Routine server maintenance is scheduled for Saturday at 2:00 AM UTC. Expect brief downtime.

HTML 
<div class="hu-alert hu-alert-info">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <div class="hu-alert-title">Scheduled Maintenance</div>
        <p>Routine server maintenance is scheduled for Saturday.</p>
    </div>
</div>
Success Alert
Deployment Complete

Your application has been successfully deployed to production.

HTML 
<div class="hu-alert hu-alert-success">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <div class="hu-alert-title">Deployment Complete</div>
        <p>Your application has been successfully deployed.</p>
    </div>
</div>
Warning Alert
Resource Usage High

Your server CPU usage has exceeded 90% for the last 15 minutes.

HTML 
<div class="hu-alert hu-alert-warning">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <div class="hu-alert-title">Resource Usage High</div>
        <p>Your server CPU usage has exceeded 90%.</p>
    </div>
</div>
Danger Alert
Payment Failed

We were unable to process your payment. Please update your billing information.

HTML 
<div class="hu-alert hu-alert-danger">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <div class="hu-alert-title">Payment Failed</div>
        <p>We were unable to process your payment.</p>
    </div>
</div>

Alert with Title

Use .hu-alert-title inside .hu-alert-content for a bold heading with a description underneath.

Title & Description
New Feature: Edge Caching

We've enabled edge caching on all plans. Your site can now serve content from 200+ global nodes for faster load times.

HTML 
<div class="hu-alert hu-alert-info">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <div class="hu-alert-title">New Feature: Edge Caching</div>
        <p>We've enabled edge caching on all plans.</p>
    </div>
</div>

Dismissible Alerts

Add the .hu-alert-dismiss class with a close button to allow users to dismiss alerts.

Dismissible Alert
Disk Space Low

Your server disk usage is at 85%. Consider upgrading or removing unused files.

HTML 
<div class="hu-alert hu-alert-warning">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <div class="hu-alert-title">Disk Space Low</div>
        <p>Your server disk usage is at 85%.</p>
    </div>
    <button class="hu-alert-dismiss" aria-label="Dismiss alert">
        <svg ...>...</svg>
    </button>
</div>
All Dismissible Variants

This is a dismissible info alert.

This is a dismissible success alert.

This is a dismissible warning alert.

This is a dismissible danger alert.

HTML 
<div class="hu-alert hu-alert-info">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <p>This is a dismissible info alert.</p>
    </div>
    <button class="hu-alert-dismiss" aria-label="Dismiss alert">
        <svg ...>...</svg>
    </button>
</div>

Alert Variants

Alerts come in three visual styles: solid (default), outlined, and light. Use the base variant classes and add the outline or light modifier.

Solid Alerts (Default)

Solid info alert with default background fill.

Solid success alert with default background fill.

HTML 
<div class="hu-alert hu-alert-info">...</div>
<div class="hu-alert hu-alert-success">...</div>
Outlined Alerts

Outlined info alert with transparent background.

Outlined success alert with transparent background.

Outlined warning alert with transparent background.

Outlined danger alert with transparent background.

HTML 
<div class="hu-alert hu-alert-info" style="background: transparent; border: 2px solid var(--hu-info);">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <p>Outlined info alert.</p>
    </div>
</div>
Light Alerts

Light info alert with subtle background.

Light success alert with subtle background.

Light warning alert with subtle background.

Light danger alert with subtle background.

HTML 
<div class="hu-alert" style="background: var(--hu-info-lighter); border-color: var(--hu-info-light); color: var(--hu-info-dark);">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <p>Light info alert with subtle background.</p>
    </div>
</div>

Real-World Examples

Real-world alert patterns commonly used in dashboards and admin panels and customer notifications.

Server Status Change
Server Status Change

Web server web-01.prod has been moved to maintenance mode. All requests are being served from the failover instance. View status page

HTML 
<div class="hu-alert hu-alert-warning">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <div class="hu-alert-title">Server Status Change</div>
        <p>Web server <strong>web-01.prod</strong> has been moved to maintenance mode.
            <a href="#" class="hu-alert-link">View status page</a>
        </p>
    </div>
    <button class="hu-alert-dismiss" aria-label="Dismiss alert">...</button>
</div>
SSL Certificate Expiring
SSL Certificate Expiring Soon

The SSL certificate for *.example.com expires in 3 days. Renew immediately to avoid service disruption and browser warnings. Renew certificate

HTML 
<div class="hu-alert hu-alert-danger">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <div class="hu-alert-title">SSL Certificate Expiring Soon</div>
        <p>The SSL certificate for <strong>*.example.com</strong> expires in 3 days.
            <a href="#" class="hu-alert-link">Renew certificate</a>
        </p>
    </div>
    <button class="hu-alert-dismiss" aria-label="Dismiss alert">...</button>
</div>
New Feature Announcement
Introducing: One-Click Staging

Create staging environments from your production site with a single click. Test changes safely before going live. Learn more

HTML 
<div class="hu-alert hu-alert-info">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <div class="hu-alert-title">Introducing: One-Click Staging</div>
        <p>Create staging environments from your production site.
            <a href="#" class="hu-alert-link">Learn more</a>
        </p>
    </div>
    <button class="hu-alert-dismiss" aria-label="Dismiss alert">...</button>
</div>
Migration Complete
Migration Complete

Your site has been successfully migrated from starter to business plan. All features are now active. View plan details

HTML 
<div class="hu-alert hu-alert-success">
    <svg class="hu-alert-icon" ...>...</svg>
    <div class="hu-alert-content">
        <div class="hu-alert-title">Migration Complete</div>
        <p>Your site has been successfully migrated from <strong>starter</strong> to <strong>business</strong> plan.
            <a href="#" class="hu-alert-link">View plan details</a>
        </p>
    </div>
</div>

API Reference

Complete list of CSS classes available for alerts.

Class Description
.hu-alert Base alert container with flex layout, border, and padding.
.hu-alert-info Info variant with blue background and border.
.hu-alert-success Success variant with green background and border.
.hu-alert-warning Warning variant with amber background and border.
.hu-alert-danger Danger variant with red background and border.
.hu-alert-icon Icon container with fixed size and flex shrink.
.hu-alert-content Content wrapper that fills remaining space.
.hu-alert-title Bold heading text with bottom margin.
.hu-alert-dismiss Dismiss button positioned absolute top-right.
.hu-alert-link Styled inline link with underline and bold weight.