For AI agents: the complete documentation index is available at /ooui-react/en/llms.txt, the full documentation bundle is available at /ooui-react/en/llms-full.txt, and this page is available as Markdown at /ooui-react/en/components/button-input/index.md.
ooui-react
  • English

      • ButtonInput

      Source | Original component

      A form button: renders a real <button> / <input> element whose type / name / value / formNoValidate take part in native form submission. Use Button when you have no submission needs.

      Basic usage

      Drop it into a FormLayout to trigger native submission; a type="submit" button carries its own name / value — whichever is clicked is the one submitted.

      import { useState } from "react";
import { ButtonInput, FormLayout, HiddenInputWidget } from "ooui-react";

function App() {
  const [submitted, setSubmitted] = useState("");

  return (
    <FormLayout
      onSubmit={(event) => {
        event.preventDefault();
        const pairs: string[] = [];
        new FormData(event.currentTarget).forEach((value, key) => {
          pairs.push(`${key}=${value}`);
        });
        setSubmitted(pairs.join(" & "));
      }}
    >
      <HiddenInputWidget name="source" value="demo" />
      <ButtonInput type="submit" flags={["primary", "progressive"]}>
        Save
      </ButtonInput>
      <ButtonInput type="submit" name="action" value="draft" formNoValidate>
        Save draft (skip validation)
      </ButtonInput>
      {submitted && <div>Submitted: {submitted}</div>}
    </FormLayout>
  );
}

export default App;

      The input form

      useInputTag renders an <input> instead of a <button>: the label text doubles as the submitted value; icons, indicators and the value prop are not supported (the label must be plain text).

      import { ButtonInput } from "ooui-react";

function App() {
  return (
    <ButtonInput type="submit" useInputTag flags={["primary", "progressive"]}>
      Save
    </ButtonInput>
  );
}

export default App;

      API

      PropDescriptionTypeDefault
      childrenButton textReactNode—
      typeNative type attribute'button' | 'submit' | 'reset''button'
      name / valueSubmitted field name and value (ignored with useInputTag; the <input>'s value is the label)string—
      formNoValidateSkip form validation on submitbooleanfalse
      useInputTagRender as <input> instead of <button>booleanfalse
      flagsExtra flags (color and form)ButtonFlag | ButtonFlag[][]
      framedWhether framedbooleantrue
      activeWhether in the active statebooleanfalse
      icon / indicatorIcon / indicator (unsupported with useInputTag)string / 'clear' | 'up' | 'down' | 'required'—
      invisibleLabelHide the label visually but keep it as the accessible namebooleanfalse
      onClickClick handler (Enter/Space on the keyboard fire it too)(ev) => void—
      accessKeyAccess key (lands on the real button / input)string—
      disabledWhether disabledbooleanfalse
      ...restNative span props passed straight to the rootHTMLAttributes<HTMLSpanElement>—

      The pressed-state class (oo-ui-buttonElement-pressed) shows while pressed via mouse or keyboard, matching the original.

      See also