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

      • ToggleButton

      Source | Original component

      A toggle button: a Button that can be "pressed / unpressed".

      Basic usage

      The on/off state uses the checked / defaultChecked / onChange channels, and onChange's first argument is the new boolean state. A pressed button shows the active (highlighted) look.

      import { useState } from "react";
import { ToggleButton } from "ooui-react";

function App() {
  const [highlight, setHighlight] = useState(false);

  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <ToggleButton icon="highlight" checked={highlight} onChange={setHighlight}>
        Highlight
      </ToggleButton>
      <ToggleButton icon="star" defaultChecked>
        Favorite (uncontrolled, pressed initially)
      </ToggleButton>
      <span>Highlight: {String(highlight)}</span>
    </div>
  );
}

export default App;

      Unframed form

      Like Button it supports framed={false} and the various flags, commonly used for grouped toggles in a toolbar.

      import { ToggleButton } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <ToggleButton icon="bold" defaultChecked>
        Bold
      </ToggleButton>
      <ToggleButton icon="italic">
        Italic
      </ToggleButton>
      <ToggleButton framed={false} icon="link" defaultChecked>
        Unframed
      </ToggleButton>
    </div>
  );
}

export default App;

      How it differs from Button

      ToggleButton borrows Button's appearance but has no link capability: href / target / rel / anchorRef are not accepted, and active, onClick and aria-pressed are driven by the toggle state and not exposed. Use Button to "run an action once on click", and this component to "express a persistent on/off state".

      API

      PropDescriptionTypeDefault
      childrenButton labelReactNode—
      checkedWhether pressed (controlled; passing it enables control)boolean—
      defaultCheckedInitial toggle state for uncontrolled usebooleanfalse
      onChangeToggle-state change callback (returns only the new state)(checked: boolean) => void—
      iconLeading icon namestring—
      indicatorTrailing indicator'up' | 'down' | 'clear' | 'required'—
      flagsExtra flags (color and button-specific form)ButtonFlag | ButtonFlag[][]
      framedWhether it has a borderbooleantrue
      invisibleLabelLabel visually hidden (kept as accessible name)booleanfalse
      disabledWhether disabled (incl. the owning ButtonGroup's group disable)booleanfalse
      tabIndexTab ordernumber | null0
      ...restButton's remaining non-link props, passed straight to the button elementobject—

      onChange is a toggle callback and does not follow the value-first ChangeHandler signature (see Controlled and uncontrolled · Callback signatures).

      See also