Skip to content
uiify

Menu

NativeInvoker

A native `<button>` that fires an Invoker Commands API command at another element by id. 0 kB client JS, at most 0.3 kB gzipped.

Anatomy

<NativeInvoker command="show-modal" commandfor="settings-dialog">Open</NativeInvoker>

Live demo

This demo also runs with JavaScript disabled.

Opened by a command

NativeInvoker

Renders <button> (or another intrinsic tag via `as`). Emits type="button", command, commandfor, class="uiify-native-invoker".

PropTypeDefaultDescription
command"show-modal" | "request-close" | "close" | "show-popover" | "hide-popover" | "toggle-popover" | `--${string}`—Required. The command sent to the `commandfor` target when the button is activated.
commandforstring—Required. `id` of the element this button invokes a command on.
asNativeButtonAs<TAs>"button"Intrinsic tags other than "button" are a type error — invoker commands only fire from a real button.

Rendered DOM

<button type="button" class="uiify-native-invoker" command="show-modal" commandfor="settings-dialog">Open</button>

CSS contract

/* NativeInvoker emits no state of its own — the state lives on its commandfor target. */
/* See NativeDialog, NativePopover and NativeDetails for the selectors that read that target's state. */

Build your own

import { NativeInvoker } from "@gunkin/uiify/elements/native-invoker";

export function SaveToast() {
  return (
    <>
      <NativeInvoker command="show-popover" commandfor="save-toast">
        Save
      </NativeInvoker>
      <div id="save-toast" popover="manual" role="status">
        Saved.
        <NativeInvoker command="hide-popover" commandfor="save-toast">
          Dismiss
        </NativeInvoker>
      </div>
    </>
  );
}

Used by

Gotchas

  • `commandfor` must reference an `id` already present in the DOM — the browser resolves it at click time, not at render time.
  • `as` only accepts `"button"` — invoker commands only fire from a real button.
  • A custom `--*` command needs its own `command` event listener on the target; the element does not wire one up.
  • `command` and `commandfor` are lowercase HTML attributes that `@types/react` does not declare; this element is the one place that workaround lives.

Import

import { NativeInvoker } from "@gunkin/uiify/elements/native-invoker";