HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
DialogView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA modal window, on the platform's own dialog.StableSince 0.1.0OverlaysUsageimport'@fusion.dev/helix/dialog'import'@fusion.dev/helix-headless/dialog'Preview
API ReferenceRoothelix-dialogA modal window, on the platform's own dialog.
PropTypeDefaultDescriptionalign"center"|"start"Whether the panel's contents run from the start or center on it.closedBy"any"|"closerequest"|"none"Which close requests the browser answers on its own.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.labelstring""Accessible name for the dialog.openbooleanWhether the element is open.persistentbooleanfalseWhether Escape or a press on the backdrop can close it.returnValuestringWhat the dialog closed with, the way `<dialog>` reports it.size"sm"|"md"|"lg"|"full"How wide the panel is allowed to be.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The dialog's content.footerThe actions.headerThe title, and anything beside it.iconA single mark above the title, for a dialog that warns.
EventTypeDescriptioncloseEventRelayed, because the platform's own does not escape.helix-before-closeHelixBeforeCloseEventFired before it closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before it opens, and cancelable.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionclose(returnValue: string) => voidAsks to close, which a consumer may refuse.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.show() => voidMoves focus into the dialog and makes the rest of the page inert.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptiondialogThe native dialog element.
CSS PropertyDescription--dialog-border-colorColor of the panel's edge.--dialog-border-widthWidth of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise.--dialog-icon-sizeHow big the mark above the title is.--dialog-inline-sizeWidth of the panel.--dialog-paddingPadding inside the panel.--dialog-riseHow far the panel rises as it opens. Follows `--helix-space-lg`.--dialog-scrimThe wash over the page behind the dialog. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.--dialog-shadowLift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.
Roothelix-headless-dialogA modal window, on the platform's own dialog.
PropTypeDefaultDescriptionclosedBy"any"|"closerequest"|"none"Which close requests the browser answers on its own.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.labelstring""Accessible name for the dialog.openbooleanWhether the element is open.persistentbooleanfalseWhether Escape or a press on the backdrop can close it.returnValuestringWhat the dialog closed with, the way `<dialog>` reports it.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The dialog's content.footerThe actions.headerThe title, and anything beside it.iconA single mark above the title, for a dialog that warns.
EventTypeDescriptioncloseEventRelayed, because the platform's own does not escape.helix-before-closeHelixBeforeCloseEventFired before it closes, and cancelable.helix-before-openHelixBeforeOpenEventFired before it opens, and cancelable.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionclose(returnValue: string) => voidAsks to close, which a consumer may refuse.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.show() => voidMoves focus into the dialog and makes the rest of the page inert.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptiondialogThe native dialog element.
ExamplesNameDescriptionCenteredA dialog whose content sits centered, for a short confirmation.EventsThe first close is refused and the second is not, which is what cancelable means.FullFilling the viewport, for something that needs the whole screen.LargeWider, for a form that will not fit the resting width.PersistentA dialog Escape and an outside press will not close, for a choice that must be made.PreviewA dialog opened by a button, with actions in its footer.PreviewA dialog opened by a button, with actions in its footer.SmallNarrow, which suits a question with two answers.