Docs / Components / Modals

Modals

Overlay dialog components for confirmations, forms, alerts, and interactive workflows. Click the buttons below to open live modals.

Basic Modal

Simple modal with header, body, and footer containing action buttons. Click the button to open.

Basic Modal
HTML 
<button class="hu-btn hu-btn-primary" data-modal-open="modal-basic">
    Open Modal
</button>

<div class="hu-modal-overlay" id="modal-basic">
    <div class="hu-modal">
        <div class="hu-modal-header">
            <h3 class="hu-modal-title">Modal Title</h3>
            <button class="hu-modal-close" data-modal-close>
                <svg ...></svg>
            </button>
        </div>
        <div class="hu-modal-body">
            <p>Modal content goes here.</p>
        </div>
        <div class="hu-modal-footer">
            <button class="hu-btn" data-modal-close>Cancel</button>
            <button class="hu-btn hu-btn-primary">Confirm</button>
        </div>
    </div>
</div>

Confirmation Modal

Destructive action confirmation with danger styling. Used for delete, suspend, or permanent action workflows.

Delete Confirmation
HTML 
<div class="hu-modal-overlay" id="modal-confirm">
    <div class="hu-modal hu-modal-sm">
        <div class="hu-modal-header">
            <h3 class="hu-modal-title">Delete Server</h3>
            <button class="hu-modal-close" data-modal-close>...</button>
        </div>
        <div class="hu-modal-body">
            <p>Are you sure you want to delete this server?
            This action cannot be undone.</p>
        </div>
        <div class="hu-modal-footer">
            <button class="hu-btn" data-modal-close>Cancel</button>
            <button class="hu-btn hu-btn-danger">Delete Server</button>
        </div>
    </div>
</div>

Real-World Examples

Real-world modal patterns commonly used in dashboards and admin panels, server management, and support workflows.

Server Reboot Confirmation
HTML 
<div class="hu-modal-overlay" id="modal-reboot">
    <div class="hu-modal hu-modal-sm">
        <div class="hu-modal-header">
            <h3 class="hu-modal-title">Reboot Server?</h3>
            <button class="hu-modal-close" data-modal-close>...</button>
        </div>
        <div class="hu-modal-body">
            <p>Server "web-prod-01" will be rebooted.
            All running processes will be terminated.</p>
            <p class="hu-text-muted">Estimated downtime: 2-3 minutes</p>
        </div>
        <div class="hu-modal-footer">
            <button class="hu-btn" data-modal-close>Cancel</button>
            <button class="hu-btn hu-btn-warning">Reboot Now</button>
        </div>
    </div>
</div>
Domain Registration Modal
HTML 
<div class="hu-modal-overlay" id="modal-domain">
    <div class="hu-modal">
        <div class="hu-modal-header">
            <h3 class="hu-modal-title">Register a Domain</h3>
            <button class="hu-modal-close" data-modal-close>...</button>
        </div>
        <div class="hu-modal-body">
            <form>
                <div class="hu-form-group">
                    <label class="hu-form-label">Domain Name</label>
                    <div class="hu-input-group">
                        <input class="hu-form-input" placeholder="mywebsite">
                        <select class="hu-form-select">
                            <option>.com — $12.99/yr</option>
                            <option>.net — $14.99/yr</option>
                            <option>.org — $11.99/yr</option>
                            <option>.io — $39.99/yr</option>
                        </select>
                    </div>
                </div>
                <div class="hu-form-group">
                    <label class="hu-form-label">Registrant Email</label>
                    <input class="hu-form-input" type="email">
                </div>
                <div class="hu-form-check">
                    <input type="checkbox" class="hu-form-check-input" id="privacy">
                    <label class="hu-form-check-label" for="privacy">Enable WHOIS privacy (+$4.99/yr)</label>
                </div>
            </form>
        </div>
        <div class="hu-modal-footer">
            <button class="hu-btn" data-modal-close>Cancel</button>
            <button class="hu-btn hu-btn-primary">Register — $12.99/yr</button>
        </div>
    </div>
</div>
Support Ticket Creation
HTML 
<div class="hu-modal-overlay" id="modal-ticket">
    <div class="hu-modal">
        <div class="hu-modal-header">
            <h3 class="hu-modal-title">Create Support Ticket</h3>
            <button class="hu-modal-close" data-modal-close>...</button>
        </div>
        <div class="hu-modal-body">
            <form>
                <div class="hu-form-group">
                    <label class="hu-form-label">Subject</label>
                    <input class="hu-form-input" placeholder="Brief description">
                </div>
                <div class="hu-form-group">
                    <label class="hu-form-label">Category</label>
                    <select class="hu-form-select">
                        <option>Server Issue</option>
                        <option>Billing</option>
                        <option>Domain</option>
                        <option>DNS</option>
                        <option>Other</option>
                    </select>
                </div>
                <div class="hu-form-group">
                    <label class="hu-form-label">Priority</label>
                    <select class="hu-form-select">
                        <option>Low</option>
                        <option>Medium</option>
                        <option>High</option>
                        <option>Critical</option>
                    </select>
                </div>
                <div class="hu-form-group">
                    <label class="hu-form-label">Description</label>
                    <textarea class="hu-form-textarea" rows="4"></textarea>
                </div>
            </form>
        </div>
        <div class="hu-modal-footer">
            <button class="hu-btn" data-modal-close>Cancel</button>
            <button class="hu-btn hu-btn-primary">Submit Ticket</button>
        </div>
    </div>
</div>

API Reference

Complete list of CSS classes and data attributes for modals.

Classes

Class Description
.hu-modal-overlay Full-screen backdrop container. Covers the viewport with a semi-transparent background. Add .hu-active to show.
.hu-active State class applied to the overlay to make the modal visible.
.hu-modal Base modal dialog container. Centered within the overlay with default max-width of 32rem.
.hu-modal-sm Small modal variant. Max-width: 20rem. Ideal for confirmations and alerts.
.hu-modal-lg Large modal variant. Max-width: 48rem. For detailed forms and multi-column content.
.hu-modal-xl Extra large modal variant. Max-width: 64rem. For complex layouts and dashboards.
.hu-modal-header Modal header container with title and close button. Flex layout with space-between.
.hu-modal-title Heading element inside the modal header. Styled at 1.25rem font-size, 600 weight.
.hu-modal-close Close button in the modal header. Ghost-styled icon button with hover feedback.
.hu-modal-body Main content area of the modal. Scrollable when content overflows. Padded.
.hu-modal-footer Footer container for action buttons. Flex layout with right-aligned buttons.

Data Attributes

Attribute Element Description
data-modal-open="id" Trigger button Opens the modal overlay with the matching id attribute.
data-modal-close Close button Closes the parent modal when clicked. Place inside .hu-modal.