Dowe

OVERLAY

Modal

Modals keep a focused task above the current screen while one bool Signal owns whether the dialog is open.

PLAYGROUND

A focused profile review

Open the dialog to inspect its optional header and footer, generated close control, overlay, and explicit close action.

signal profileModalOpen value:false

fn openProfileModal
  set profileModalOpen value:true

fn closeProfileModal
  set profileModalOpen value:false

Button onClick:openProfileModal
  "Review profile"

Modal open:profileModalOpen onClose:closeProfileModal scheme:"surface"
  header
    Title size:"xl"
      "Review profile"
  Text
    "Confirm that this profile is ready to appear in the directory."
  footer
    Button onClick:closeProfileModal variant:"solid" scheme:"primary"
      "Confirm"

STRUCTURE

Body content with optional edges

The body is required. Add header for a title or context, and footer for persistent actions that stay grouped at the bottom of the dialog.

HEADER

Optional context

Use header for the dialog title, status, or compact context that people need before reading the body.

BODY

Required content

Place the task, explanation, form controls, or supporting information directly inside Modal.

FOOTER

Optional actions

Use footer for close, cancel, confirm, or other declared actions that complete the focused task.

CLOSE BEHAVIOR

Choose the available exit paths

By default, the generated close control and a click on the overlay close the dialog. Keep a visible action in the footer when the task must make its exit explicit.

Standard close behavior

The overlay and generated close control dismiss this dialog, and onClose invokes the declared function after the open Signal changes.

Explicit decision

Disable overlay close and hide the generated close control when the footer must be the visible route out of the dialog.

Modal open:publishOpen disableOverlayClose:true hideCloseButton:true
  header
    Title
      "Publish changes?"
  Text
    "The footer provides the visible actions for this decision."
  footer
    Button onClick:closePublish variant:"ghost" scheme:"muted"
      "Cancel"
    Button onClick:publish variant:"solid" scheme:"warning"
      "Publish"

VARIANTS AND SCHEMES

Keep the dialog aligned with its context

Modal uses the same solid, soft, outlined, and ghost variants as other design-family surfaces. Its default scheme is surface, but every Dowe design family is available when the context needs stronger emphasis.

Modal open:detailsOpen variant:"solid" scheme:"surface"
  Text
    "Default dialog surface"

Modal open:noticeOpen variant:"soft" scheme:"info"
  Text
    "Informational dialog"

Modal open:reviewOpen variant:"outlined" scheme:"warning"
  Text
    "Review before continuing"

Modal open:removeOpen variant:"ghost" scheme:"danger"
  Text
    "Destructive context"

TARGET BEHAVIOR

One dialog contract, target-owned presentation

The same source stays signal-driven on every target while Dowe generates the appropriate overlay surface and close behavior.

WEB

Fixed dialog overlay

Generated web output includes the overlay, close control, Escape handling, and reactive Signal updates.

ANDROID

Dowe popup dialog

Generated Compose presents a Dowe-owned dialog surface rather than inline page content.

IOS

Window presenter

Generated SwiftUI mounts the same dialog contract through a Dowe-owned window presenter.

API

Props and regions

Modal also accepts the applicable common spacing, sizing, border, radius, visibility, and style props. Use scheme, not color, to select its design family.

Prop or region	Type	Default
No data There are no records to display

No data