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

      • Message 消息

      源代码 | 原版组件

      行内消息提示，类型有 notice / error / warning / success。

      基本用法

      类型决定默认图标与配色，也可用 icon 覆盖。

      Notice：这是一条说明信息
      Success：保存成功
      Warning：即将超出配额
      自定义图标（覆盖类型默认图标）
      import { Message } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <Message>Notice：这是一条说明信息</Message>
      <Message type="success">Success：保存成功</Message>
      <Message type="warning">Warning：即将超出配额</Message>
      <Message type="error">Error：保存失败，请重试</Message>
      <Message icon="help">自定义图标（覆盖类型默认图标）</Message>
    </div>
  );
}

export default App;

      内联形态

      inline 渲染为不带边框的内联消息，适合嵌在正文段落中；块级（缺省）带边框与内边距。内联消息不渲染关闭按钮。

      Inline：这是一条内联说明
      import { Message } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <Message inline>Inline：这是一条内联说明</Message>
      <Message inline type="error">
        Inline error：这是一条内联错误
      </Message>
    </div>
  );
}

export default App;

      关闭按钮

      与原版的差异

      原版点击关闭按钮即自行隐藏；本工程 onClose 只报告「点击了关闭按钮」，组件不保存显隐状态——必须在回调里把消息卸载或隐藏，没有处理回调时消息无法关闭。

      点右侧 × 关闭（由 onClose 卸载）Close
      import { useState } from "react";
import { Button, Message } from "ooui-react";

function App() {
  const [visible, setVisible] = useState(true);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      {visible ? (
        <Message type="warning" showClose onClose={() => setVisible(false)}>
          点右侧 × 关闭（由 onClose 卸载）
        </Message>
      ) : (
        <Button onClick={() => setVisible(true)}>重新显示</Button>
      )}
    </div>
  );
}

export default App;

      API

      属性描述类型默认值
      children消息正文ReactNode—
      type消息类型（非法值回退 notice）'notice' | 'error' | 'warning' | 'success''notice'
      icon自定义图标，覆盖类型默认图标string类型默认
      inline内联展示（false 时为带边框的块级消息）booleanfalse
      showClose是否显示关闭按钮（inline 时不渲染）booleanfalse
      onClose点击关闭按钮的回调；组件不自行隐藏，须在此卸载/隐藏消息() => void—
      invisibleLabel正文视觉隐藏但保留可访问名称booleanfalse
      disabled是否禁用（输出 aria-disabled）booleanfalse
      ...rest原生 div 属性（className、id、data-* 等）直传根元素HTMLAttributes<HTMLDivElement>—

      无障碍：type="error" 渲染为 role="alert" 打断式播报，其余类型为 aria-live="polite"。

      另见