Introduction

An overlay modal container that halts normal user interaction with the page to gather explicit input, showcase vital dashboard tools, or request action confirmations.

The Dialog component is fully integrated as a dialog block in the Page Builder, enabling content managers to easily define structural triggers (such as clicking an action button), titles, custom footer menus, and modal text directly inside Sveltia CMS.

Hydration & Interactive Behavior

A Dialog requires a client-side JavaScript engine to manage critical accessibility behavior, focus trapping, and keyboard controls. As a result, the dialog hydrates as an active client island by default. If a static, read-only presentation wrapper is desired, set "interactive": false to prevent loading client-side script assets.

Usage

These configurations represent exactly how page-builder block items are constructed.

1. Action Confirmation Modal

A standard confirmation dialog triggered via an action button, complete with cancel and accept options. Ideal for simple choices like checking settings or confirming items.

{
  "type": "dialog",
  "title": "Confirm Account Sync",
  "description": "Are you sure you want to merge workspace details?",
  "body": "This syncs configurations across devices. Unsaved local changes might be overridden.",
  "confirmText": "Synchronize",
  "cancelText": "Dismiss",
  "trigger": [
    {
      "type": "button",
      "text": "Trigger Action Modal",
      "colorPalette": "blue"
    }
  ]
}

2. Destructive Action Alert (Alertdialog Role)

Use this format for high-consequence, irreversible destructive confirmations (e.g., deleting a database or discarding unsaved work). This configuration changes the dialog's semantic screen role to alertdialog.

{
  "type": "dialog",
  "role": "alertdialog",
  "title": "Destroy Database",
  "description": "You are about to permanently erase production server nodes.",
  "body": "This operation is immediate and completely irreversible. All live connections will instantly shut down.",
  "confirmText": "Erase Forever",
  "cancelText": "Keep Database",
  "trigger": [
    {
      "type": "button",
      "text": "Delete Database",
      "colorPalette": "red"
    }
  ]
}

Props

Accessibility & Developer Notes

Complies with the Dialog (Modal) WAI-ARIA design pattern. When hydrated, the component implements the following critical accessibility layers:

• Initial Focus Trap: Focus shifts into the dialog on open (selecting the cancel/safe action first to avoid accidental triggers) and remains trapped internally while scrolling with Tab / Shift + Tab.
• Background Inertia: Interactive elements outside the open modal container are automatically marked with the HTML inert attribute to prevent screen readers or keyboard controls from focusing on elements behind the backdrop.
• Escape Close Handling: Pressing the Escape keyboard button automatically shuts the active dialog container (unless closeOnEscape is configured otherwise).
• Body Scroll Locking: Document body scrolling is frozen while a modal is active and automatically restored once the dialog has completed its close transition.