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/message/index.md.
ooui-react
  • English

      • Message

      Source | Original component

      An inline notice, with notice / error / warning / success types.

      Basic usage

      The type picks the default icon and color scheme; override it with icon.

      Notice: everything looks fine
      Success: saved
      Warning: you are about to exceed the quota
      Custom icon (overrides the type default)
      import { Message } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <Message>Notice: everything looks fine</Message>
      <Message type="success">Success: saved</Message>
      <Message type="warning">Warning: you are about to exceed the quota</Message>
      <Message type="error">Error: saving failed, please retry</Message>
      <Message icon="help">Custom icon (overrides the type default)</Message>
    </div>
  );
}

export default App;

      Inline form

      inline renders a borderless inline notice for embedding in running text; the block form (default) has a border and padding. Inline messages never render a close button.

      Inline: this is an inline notice
      import { Message } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <Message inline>Inline: this is an inline notice</Message>
      <Message inline type="error">
        Inline error: this is an inline error
      </Message>
    </div>
  );
}

export default App;

      Close button

      Differences from OOUI

      In the original, clicking the close button hides the message itself; here onClose only reports the click and the component holds no visibility state — you must unmount or hide the message in the callback, otherwise the message cannot be dismissed.

      Click the × to close (unmounted by 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)}>
          Click the × to close (unmounted by onClose)
        </Message>
      ) : (
        <Button onClick={() => setVisible(true)}>Show again</Button>
      )}
    </div>
  );
}

export default App;

      API

      PropDescriptionTypeDefault
      childrenThe message textReactNode—
      typeMessage type (invalid values fall back to notice)'notice' | 'error' | 'warning' | 'success''notice'
      iconCustom icon, overrides the type defaultstringtype default
      inlineInline display (false renders a bordered block message)booleanfalse
      showCloseWhether to show the close button (not rendered when inline)booleanfalse
      onCloseClose-button click handler; the component never hides itself — unmount/hide the message here() => void—
      invisibleLabelHide the text visually but keep it as the accessible namebooleanfalse
      disabledWhether disabled (outputs aria-disabled)booleanfalse
      ...restNative div props (className, id, data-*, etc.) passed straight to the rootHTMLAttributes<HTMLDivElement>—

      Accessibility: type="error" renders as role="alert" (assertive announcement); the other types use aria-live="polite".

      See also