Dialog

View sourcecomponents/dialog.go

Open a dialog#

Open from the trigger; confirm, cancel, close or press Escape to dismiss.

Enable JavaScript to run the preview. Go source and install commands remain available.

if open {
    d := f.Dialog(flex.DialogSpec{
        Title: "Save changes?", Description: "This updates the local example state.",
        Width: 440, Scope: scope, CloseID: closeID,
    })
    d.Footer(func() {
        if f.Button(cancelID, "Cancel").Outline().Clicked() { open = false }
        if f.Button(confirmID, "Confirm").Clicked() { open, saved = false, true }
    })
    if d.Dismissed() { open = false }
}

Confirmation#

Starts open. Tab remains in the dialog; reopen it after closing.

Enable JavaScript to run the preview. Go source and install commands remain available.

if open {
    d := f.Dialog(flex.DialogSpec{
        Title: "Discard changes?", Description: "Unsaved edits will be lost.",
        Scope: scope, CloseID: closeID,
    })
    d.Footer(func() {
        if f.Button(cancelID, "Cancel").Outline().Clicked() { open = false }
        if f.Button(confirmID, "Discard").Clicked() { open = false }
    })
    if d.Dismissed() { open = false }
}

Destructive action#

Only updates local demo state. No files or other data are deleted.

Enable JavaScript to run the preview. Go source and install commands remain available.

if open {
    d := f.Dialog(flex.DialogSpec{
        Title: "Remove draft?", Description: "Demo only; no data is deleted.",
        Scope: scope, CloseID: closeID,
    })
    d.Footer(func() {
        if f.Button(cancelID, "Cancel").Outline().Clicked() { open = false }
        if f.Button(confirmID, "Remove").Destructive().Clicked() { open, removed = false, true }
    })
    if d.Dismissed() { open = false }
}

Installation

Copy the recipe into your own project.

go run ./cmd/viva add --out ./components/local dialog

A real modal scope#

BeginDialog paints the overlay and leaves its layer and focus scope active. Paint the body, lay the footer buttons out with Actions (each is as wide as its label needs, right-aligned in the order given), then call End. The application owns the open boolean and every action ID.

Use distinct stable IDs for the trigger, close, cancel and confirm actions.
The scope traps keyboard traversal while open; dismissal restores prior focus when available.
The example does not dismiss on outside click; use its buttons or Escape. Confirm and destructive cases start open.

Open, confirm, dismiss#

Open the example, Tab through its actions, press Escape to dismiss, or choose Confirm/Cancel. The result is visible in the preview; no external action is performed.

Keyboard

Use Tab to move between controls and Ctrl/⌘ K to search the catalog. Inside a preview, the Go runtime handles keyboard input.