Modal
OrganismFocus-trapped dialog. Closes on Escape and backdrop click. Requires role="dialog" + aria-modal + aria-labelledby; supports sm/md/lg sizes.
Confirm action
This action cannot be undone.
Are you sure you want to delete this item? All associated data will be permanently removed.
<%- include('modules/ui/Modal', {
id: 'confirm-modal',
title: 'Confirm action',
description: 'This action cannot be undone.',
children: '<p>Are you sure you want to delete this item?</p>',
footer: '<button onclick="closeModal('confirm-modal')">Cancel</button>'
}) %>
<!-- Trigger -->
<button onclick="openModal('confirm-modal')">Open modal</button>Quick note
A compact modal for short confirmations or alerts.
<%- include('modules/ui/Modal', {
id: 'quick-note',
title: 'Quick note',
size: 'sm',
children: '<p>A compact modal for short confirmations.</p>',
footer: '<button onclick="closeModal('quick-note')">Got it</button>'
}) %>Edit profile
<%- include('modules/ui/Modal', {
id: 'edit-profile',
title: 'Edit profile',
size: 'lg',
children: '...',
footer: '...'
}) %>Keyboard shortcuts
Press ESC to close at any time.
- Open search⌘K
- Close modalESC
- New item⌘N
<%- include('modules/ui/Modal', {
id: 'shortcuts',
title: 'Keyboard shortcuts',
description: 'Press ESC to close at any time.',
children: '...'
}) %><%- include('./Overlays/Modal/Modal', locals) %>