Modal

Modals focus attention on a single task or confirmation. In Nuxt / PLAI use UModal.

Element	Source
Panel surface, borders, backdrop	Nuxt UI zinc neutrals
Close button hover	Nuxt UI
Focus rings	CI link blue
Footer Delete / primary	CI brand blue
Footer Cancel	Nuxt UI outline

Live examples

Open modal

Try: open via button, close with Escape or Cancel, focus returns to the trigger.

HTML

<button type="button" data-ci-modal-open="confirm-modal">Open</button>

<div
  id="confirm-modal"
  class="ci-modal"
  hidden
  role="dialog"
  aria-modal="true"
  aria-labelledby="confirm-title"
>
  <div class="ci-modal__backdrop" data-ci-modal-close></div>
  <div class="ci-modal__panel">…</div>
</div>

JavaScript (reference)

The docs site loads pattern-behaviors.js for open/close, focus trap, and Escape handling. Production apps should use UModal with equivalent behaviour.

Accessibility

• role="dialog", aria-modal="true", aria-labelledby pointing at the title.
• Initial focus on open; restore focus to trigger on close.
• Backdrop click closes only when explicitly wired (destructive flows may disable this).
• Do not nest modals.

Related patterns

• Button — trigger and footer actions
• Form layout — forms inside dialogs