Alert

Import

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

Signatures

export declare function Alert<const Options extends AlertOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, AlertInternalProps>, 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 { Alert } from "@typed/ui/Alert";
import { Button } from "@typed/ui/Button";
import { component } from "@typed/template";

export const AlertPreview = component(function* () {
  const message = yield* RefSubject.make("");
  return html`<section>
    <p>Preview the message shown when an upload fails.</p>
    ${Button({
      content: "Preview upload failure",
      onclick: RefSubject.set(message, "Upload failed. Your file is still available; try again."),
    })}
    ${Alert({ content: message, props: { class: "upload-alert" } })}
  </section>`;
});

Other public imports

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

• Alert.Alert from @typed/ui
• Alert.Alert from @typed/ui/index

Source

• packages/ui/src/Alert.ts:73