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

      • Indicator

      Source | Original component

      An indicator component, usually rendered inside other components to convey a specific meaning.

      Basic usage

      Four values: up, down, clear (the close cross) and required (the required asterisk).

      import { Indicator } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <Indicator indicator="up" title="up" />
      <Indicator indicator="down" title="down" />
      <Indicator indicator="clear" title="clear" />
      <Indicator indicator="required" title="required" />
    </div>
  );
}

export default App;

      Disabled state

      disabled outputs oo-ui-widget-disabled and aria-disabled; the theme fades the indicator.

      import { Indicator } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
      <Indicator indicator="down" title="Normal" />
      <Indicator indicator="down" disabled title="Disabled" />
    </div>
  );
}

export default App;

      Structure

      The component renders a single <span>; ref points to it and undeclared props pass through to that element. An indicator is a text-free decorative glyph — when you need a screen reader to convey its meaning, give the host element an aria-label.

      API

      PropDescriptionTypeDefault
      indicatorIndicator kind'up' | 'down' | 'clear' | 'required'—
      disabledWhether disabledbooleanfalse
      ...restNative span props (className, title, aria-*, events, etc.) passed straight to the rootHTMLAttributes<HTMLSpanElement>—