Skip to main content
DOMButton generates <button> elements as HTML strings. It applies the pure-button Blueprint class by default, and lets you attach a click handler that runs inside the plugin iframe runtime.

​
Import

import { DOMButton } from "@anikitenko/fdo-sdk";

​
Constructor

new DOMButton()
No parameters. DOMButton extends DOM and inherits the full styling and attribute utilities.

​
Methods

​
createButton

Creates a <button> element with a label, click handler, and optional style overrides. 
createButton(
  label: string,
  onClick: Function,
  options?: Partial<typeof DOM.DEFAULT_OPTIONS>,
  id?: string,
  otherProps?: Record<string, any>
): string
​
label
string
required
The visible text content of the button.
​
onClick
Function
required
A function serialized and attached as the onClick event handler. The function runs in the plugin iframe context — you have access to document, window, and any globals available there.
​
options
object
Style options. Supports classes, style, and disableDefaultClass.
  • classes — additional CSS class names
  • style — inline style object compiled to a goober atomic class
  • disableDefaultClass — set to true to remove the built-in pure-button class
​
id
string
Element id. Auto-generated if omitted.
​
otherProps
object
Any additional HTML attributes to merge into the element, such as disabled, type, or aria-label.
Returns: string — the rendered <button> HTML.

​
Examples

​
Basic button

import { DOMButton } from "@anikitenko/fdo-sdk";

const button = new DOMButton();

const btn = button.createButton(
  "Click me",
  () => console.log("Button clicked")
);

​
Styled button

const button = new DOMButton();

const btn = button.createButton(
  "Register Session",
  () => {},
  {
    style: {
      marginTop: "12px",
      padding: "8px 12px",
      borderRadius: "4px",
      border: "1px solid #0b65d8",
      color: "#0b65d8",
      backgroundColor: "#eef5ff",
      cursor: "pointer",
    },
  },
  "register-session-button"
);

​
Button with DOM interaction in the click handler

The click handler is serialized as a function and runs inside the plugin iframe. You can safely reference document and window from within it. 
const button = new DOMButton();

const refreshBtn = button.createButton(
  "Refresh",
  () => {
    const statusEl = document.getElementById("status-label");
    if (statusEl) {
      statusEl.textContent = "Refreshed!";
    }
  },
  { style: { cursor: "pointer" } },
  "refresh-btn"
);

​
Disabled button

Pass disabled: true via otherProps: 
const button = new DOMButton();

const disabledBtn = button.createButton(
  "Unavailable",
  () => {},
  {},
  undefined,
  { disabled: true, "aria-disabled": "true" }
);

​
Stripping the default Blueprint class

Set disableDefaultClass: true to remove the pure-button class and apply only your own styles: 
const button = new DOMButton();

const plainBtn = button.createButton(
  "Custom Styled",
  () => {},
  {
    disableDefaultClass: true,
    classes: ["my-btn"],
    style: { background: "#333", color: "#fff", padding: "6px 14px" },
  }
);

​
Full composition example

import { DOMButton, DOMText, DOMNested, DOMSemantic } from "@anikitenko/fdo-sdk";

const button = new DOMButton();
const text = new DOMText();
const nested = new DOMNested();
const semantic = new DOMSemantic();

const view = semantic.createMain([
  text.createHText(2, "Actions"),
  nested.createBlockDiv(
    [
      button.createButton(
        "Deploy",
        () => {
          document.getElementById("status")!.textContent = "Deploying...";
        },
        { style: { marginRight: "8px" } },
        "deploy-btn"
      ),
      button.createButton(
        "Cancel",
        () => {
          document.getElementById("status")!.textContent = "Cancelled.";
        },
        { classes: ["pure-button-danger"] },
        "cancel-btn"
      ),
    ],
    { style: { display: "flex", gap: "8px", marginTop: "12px" } }
  ),
  text.createSpanText("", {}, "status"),
]);
Click handlers are serialized via Function.prototype.toString(). Closures that capture variables from an outer plugin scope will not work as expected — write self-contained handlers that read state from the DOM directly.