function / @typed/ui

Dialog.Trigger

Renders a native button that opens dialog content.

Learn this UI primitive →

Package version
1.0.0-beta.13
Category
Opening controls
Since
1.0.0
Member of
Dialog

Import

import { Dialog } from "@typed/ui";

Access Dialog.Trigger through the imported Dialog export. Its declaration below describes the member.

This public exposure is a re-export. Its import path is supported; declaration documentation is shared with the other public exposures below.

Signatures

export declare function Trigger<const Options extends TriggerOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, TriggerInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;

Why

It preserves button semantics, real events, and ARIA relationship state. Supplying controls selects native commandfor / show-modal behavior and disables the Fx click fallback, so that form requires browser command support. Omitting controls installs the portable state-driven click handler.

Ownership and lifetime

Running the Fx owns reactive props/listeners in its Scope. A custom host must preserve button type, ARIA, command, click props, and content.

Examples

import { Effect } from "effect"
import * as Dialog from "@typed/ui/Dialog"

const program = Effect.gen(function* () {
  const state = yield* Dialog.makeState()
  // Omitting controls selects the Fx state fallback.
  return Dialog.Trigger({ state, content: "Open" })
})

Other public imports

These import paths expose the same declaration. Each page retains its own public name and signature.

Source