Modals

Blocking modal dialogs for focused tasks, forms, and multi-step flows. Styles live in scss/components/_modal.scss. For destructive confirmations with limited choices, use alert dialog on the Alerts page. For layout blocks in the page, see Cards.

Dialog pattern

Overlay with role="dialog", aria-modal="true", labelled title, optional description, scrollable body, and footer actions. The root stays in the DOM with hidden when closed.

<div class="modal" id="invite-modal" data-modal-live="" hidden="">
  <div class="modal__backdrop" data-modal-dismiss=""></div>
  <div class="modal__panel" role="dialog" aria-modal="true" aria-labelledby="invite-title">
    <header class="modal__header">
      <h2 class="modal__title heading-h5" id="invite-title">Invite teammates</h2>
      <button type="button" class="modal__close" data-modal-close="" aria-label="Close">×</button>
    </header>
    <div class="modal__body">
      <p class="body-medium">Message…</p>
    </div>
    <footer class="modal__footer"><button type="button" class="btn btn--outline" data-modal-close="">Cancel</button><button type="button" class="btn btn--primary" data-modal-close="">Send</button></footer>
  </div>
</div>

Sizes and static backdrop

Default width uses $modal-max-width (32rem). Add modal--sm (24rem) or modal--lg (42rem) on the root. Set data-modal-static on the root to require an explicit close (no backdrop dismiss) for forms or drafts.

Behavior in your app

Open with data-modal-open="{id}", close with data-modal-close or backdrop data-modal-dismiss. Copy docs-site/src/lib/modal-behavior.ts for focus trap, Escape, scroll lock, and focus restore.

import { wireAllModals } from './modal-behavior';

document.addEventListener('DOMContentLoaded', () => wireAllModals());

Class reference

Customize (Sass)

1. 01

   Modal width and layering

   Override modal tokens before importing components.
   variables

   @use "pimentcss-design-system" with (
     $modal-max-width: 36rem,
     $modal-max-width-lg: 48rem,
     $modal-z: 1300
   );

2. 02

   Rebuild CSS

   Run after editing _modal.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps