# Trigger

Renders a native button that opens dialog content.

## Signatures

```ts
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

```ts
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" })
})
```