⌘K

modal component

Drop-in semantic component. See examples, sizes, variants, and source.

Centered overlay dialog. Wrap a modal in a modal-overlay, give the trigger a data-modal="..." attribute, and add modifiers for size (xs sm xl lg fullscreen), intent (positive negative warning info), or layout (scrollable). Open / close behaviour is wired by modal.js.

Complete Examples

Basic Modal - Full Implementation

<!-- Trigger Button --> <button class="button primary" data-modal="my-modal"> Open Modal </button> <!-- Modal HTML (place at end of body) --> <div id="my-modal" class="modal-overlay hidden" aria-hidden="true"> <div class="modal"> <div class="header"> <div> <h3 class="title">Confirm Action</h3> <p class="description">Are you sure you want to proceed?</p> </div> <button class="button close" aria-label="Close"> <i class="icon x w-5 h-5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <line x1="18" y1="6" x2="6" y2="18"></line> <line x1="6" y1="6" x2="18" y2="18"></line> </svg> </i> </button> </div> <div class="content"> <p>This action cannot be undone. All data will be permanently deleted.</p> </div> <div class="footer"> <button class="button ghost">Cancel</button> <button class="button negative">Delete</button> </div> </div> </div>

JavaScript API

Opening Modals Programmatically

// Open a modal by id Modal.open('my-modal'); // Close a modal by id (or pass the overlay element directly) Modal.close('my-modal'); // Close every open modal Modal.closeAll();

Modal Events

// Listen for modal events document.getElementById('my-modal').addEventListener('modal:open', function(e) { console.log('Modal opened:', e.detail.modalId); }); document.getElementById('my-modal').addEventListener('modal:close', function(e) { console.log('Modal closed:', e.detail.modalId); });

Custom Modal Trigger

// Create your own trigger logic document.getElementById('custom-trigger').addEventListener('click', function() { // Do something before opening if (confirm('Are you ready to open the modal?')) { Modal.open('my-modal'); } });

Class API Reference

Type Class Usage Notes
Base modal-overlay Backdrop overlay that hosts the modal Toggle hidden via JS
modal The dialog box itself Always required
data-modal Trigger attribute — value matches modal id Wired by modal.js
Structure header Top bar with title and close button Child of modal
title / description Header text content Inside header
close Close button (auto-wired by JS) Pair with button base class
icon-container Decorative icon slot in colored modals Inside header
content Body of the modal Add scrollable for tall content
footer Bottom action bar Add center / between for alignment
Size xs Tiny — minimal content Modifier on modal
sm Small — quick confirmations Modifier on modal
(default) Medium — most use cases No size class needed
xl Large — detailed forms Modifier on modal
lg Big — full-window content Modifier on modal
fullscreen Covers entire viewport Modifier on modal
Color (Intent) (default) Neutral / gray No class needed
positive Success — green accent Modifier on modal
negative Error / destructive — red accent Modifier on modal
warning Caution — yellow / orange accent Modifier on modal
info Information — blue accent Modifier on modal
Layout scrollable Capped height with internal scroll Use on modal and/or content
center Center-aligns footer buttons Modifier on footer
between Space-between footer buttons Modifier on footer
States hidden Closed overlay state Toggle on modal-overlay