Button.Button

Import

import { Button } from "@typed/ui/index";

Access Button.Button through the imported Button 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 Button<const Options extends ButtonOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, ButtonInternalProps<Options>>, Options["content"], Host>): Fx<RenderEvent, Renderable.Error<Options | Host>, Renderable.Services<Options | Host> | Scope.Scope | RenderTemplate>;

Examples

import { RefSubject } from "@typed/fx";
import { html } from "@typed/template";
import { Button } from "@typed/ui/Button";
import { component } from "@typed/ui/Component";

export const PreviewCounter = component(function* () {
  const previews = yield* RefSubject.make(0);
  return html`<section>
    ${Button({
      content: "Recalculate preview",
      props: { class: "preview-action" },
      onclick: RefSubject.update(previews, (count) => count + 1),
    })}
    <p role="status">Preview calculations: ${previews}</p>
  </section>`;
});

Other public imports

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

• Button.Button from @typed/ui
• Button from @typed/ui/Button

Source

• packages/ui/src/Button.ts:107