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

      • ButtonInput 提交按钮

      源代码 | 原版组件

      表单按钮：渲染真实的 <button> / <input> 元素，type / name / value / formNoValidate 参与表单原生提交。没有提交需求时用 Button。

      基本用法

      放进 FormLayout 即可触发原生提交；type="submit" 的按钮携带自身的 name / value，点哪个提交哪个。

      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"]}>
        保存
      </ButtonInput>
      <ButtonInput type="submit" name="action" value="draft" formNoValidate>
        存草稿（跳过校验）
      </ButtonInput>
      {submitted && <div>提交内容：{submitted}</div>}
    </FormLayout>
  );
}

export default App;

      input 形态

      useInputTag 渲染为 <input> 而非 <button>：标签文本即提交值，不支持图标、指示器与 value 属性（标签仅支持纯文本）。

      import { ButtonInput } from "ooui-react";

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

export default App;

      API

      属性描述类型默认值
      children按钮文本ReactNode—
      type原生 type 属性'button' | 'submit' | 'reset''button'
      name / value提交字段名与值（useInputTag 时无效，<input> 的值为标签文本）string—
      formNoValidate提交时跳过表单校验booleanfalse
      useInputTag渲染为 <input> 而非 <button>booleanfalse
      flags附加标志（色彩与形态）ButtonFlag | ButtonFlag[][]
      framed是否带边框booleantrue
      active是否为激活状态booleanfalse
      icon / indicator图标 / 指示器（useInputTag 时不支持）string / 'clear' | 'up' | 'down' | 'required'—
      invisibleLabel标签视觉隐藏但保留可访问名称booleanfalse
      onClick点击回调（键盘 Enter/空格同样触发）(ev) => void—
      accessKey快捷键（落在真实 button / input 上）string—
      disabled是否禁用booleanfalse
      ...rest原生 span 属性直传根元素HTMLAttributes<HTMLSpanElement>—

      键盘与鼠标按压期间输出按压态类（oo-ui-buttonElement-pressed），与原版一致。

      另见