Skip to content
uiify

Invoker

A native `<button>` that fires an Invoker Commands API command at another element by id.

0 kB client JS≤ 0.3 kB gzipped

Anatomy

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

Live demo

This demo also runs with JavaScript disabled.

Invoker

Minimal

Minimal invoker target

Composition

Toggled by a custom command, not popovertarget.

Invoker

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

NameTypeDefaultNotes
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.
commandforstringRequired. `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 command="show-modal" commandfor="settings-dialog" data-uiify-invoker="" type="button">Open</button>

CSS contract

/* Invoker emits no state of its own — the state lives on its commandfor target. */
/* See Dialog, Popover and Details for the selectors that read that target's state. */

Build your own

import { Invoker } from "@gunkin/uiify/elements/invoker";

export function SaveToast() {
  return (
    <>
      <Invoker command="show-popover" commandfor="save-toast">
        Save
      </Invoker>
      <div id="save-toast" popover="manual" role="status">
        Saved.
        <Invoker command="hide-popover" commandfor="save-toast">
          Dismiss
        </Invoker>
      </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 { Invoker } from "@gunkin/uiify/elements/invoker";