Skip to content
Docs Prototypes Whitepaper

Dialog

Dialog base prototype

<wc-base-dialog-root class="relative inline-block">
  <wc-base-dialog-trigger class="rounded border px-3 py-1.5 cursor-pointer select-none">
    Open Dialog
  </wc-base-dialog-trigger>
  <wc-base-dialog-mask class="bg-black/50"></wc-base-dialog-mask>
  <wc-base-dialog-content class="w-full max-w-md rounded-lg border bg-white p-6 shadow-xl">
    <wc-base-dialog-title class="text-lg font-semibold mb-2">Confirm Action</wc-base-dialog-title>
    <wc-base-dialog-description class="text-sm text-slate-600 mb-6">
      Are you sure you want to proceed? This action cannot be undone.
    </wc-base-dialog-description>
    <div class="flex gap-3 justify-end">
      <wc-base-dialog-close class="px-4 py-2 text-sm font-medium rounded border cursor-pointer select-none">Cancel</wc-base-dialog-close>
      <wc-base-dialog-close class="px-4 py-2 text-sm font-medium rounded bg-blue-600 text-white cursor-pointer select-none">Confirm</wc-base-dialog-close>
    </div>
  </wc-base-dialog-content>
</wc-base-dialog-root>

The dialog family provides the protocol-layer building blocks for modal and non-modal dialogs.

  • dialog-root: Holds the open state and provides context to all child parts.
  • dialog-trigger: Opens or toggles the dialog on click.
  • dialog-mask: Renders the backdrop mask and follows the open state for enter/leave transitions.
  • dialog-content: Handles focus trapping, overlay dismissal strategies (ESC, outside press), and enter/leave transitions.
  • dialog-title: Semantic title automatically linked to content via aria-labelledby.
  • dialog-description: Semantic description automatically linked to content via aria-describedby.
  • dialog-close: Closes the dialog on click.

Pass alert to dialog-content to turn it into an alert dialog: it sets role="alertdialog" and disables outside-press dismissal while keeping ESC close.