Modal

Organism

Focus-trapped dialog. Closes on Escape and backdrop click. Requires role="dialog" + aria-modal + aria-labelledby; supports sm/md/lg sizes.

Default (md)

Preview

Confirm action

This action cannot be undone.

Are you sure you want to delete this item? All associated data will be permanently removed.

Code 
<%- include('modules/ui/Modal', {
  id: 'confirm-modal',
  title: 'Confirm action',
  description: 'This action cannot be undone.',
  children: '
Are you sure you want to delete this item?
',
  footer: ''
}) %>

Small (sm)

Preview

Quick note

A compact modal for short confirmations or alerts.

Code 
<%- include('modules/ui/Modal', {
  id: 'quick-note',
  title: 'Quick note',
  size: 'sm',
  children: '
A compact modal for short confirmations.
',
  footer: ''
}) %>

Large (lg)

Preview

Edit profile

Code 
<%- include('modules/ui/Modal', {
  id: 'edit-profile',
  title: 'Edit profile',
  size: 'lg',
  children: '...',
  footer: '...'
}) %>

No footer

Preview

Keyboard shortcuts

Press ESC to close at any time.

  • Open search⌘K
  • Close modalESC
  • New item⌘N
Code 
<%- include('modules/ui/Modal', {
  id: 'shortcuts',
  title: 'Keyboard shortcuts',
  description: 'Press ESC to close at any time.',
  children: '...'
}) %>
Source modules/ui/Modal.ejs