#Button

Source | Original component

The basic button component, and also the button base for ToggleButton, PopupButton, ButtonMenuSelectWidget and other components.

#Basic usage

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

function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <Button onClick={() => setCount((n) => n + 1)}>Click me</Button>
      <span>Clicked {count} times</span>
    </div>
  );
}

export default App;

#Icons and indicators

icon takes an icon name (see Icon), indicator takes one of the four indicators (see Indicator). They render on opposite ends of the label.

When the label is icon-only, turn on invisibleLabel: the label is visually hidden but kept as the accessible name, and title falls back to the label text when not given explicitly.

import { Button } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <Button icon="check">Done</Button>
      <Button icon="trash" flags="destructive">
        Delete
      </Button>
      <Button indicator="down">Expand</Button>
      <Button icon="search" invisibleLabel>
        Search
      </Button>
    </div>
  );
}

export default App;

#Flags and variants

flags affect color and icon tinting, framed={false} switches to the unframed form, and active marks a selected/activated state.

import { Button } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
      <Button>Default</Button>
      <Button flags="progressive">Continue</Button>
      <Button flags={["primary", "progressive"]}>Save</Button>
      <Button flags="destructive">Delete</Button>
      <Button framed={false} flags="destructive">
        Unframed delete
      </Button>
      <Button active>Active</Button>
    </div>
  );
}

export default App;

A framed button inverts as a whole when primary, active, or disabled, and the icon and indicator invert with it; otherwise it is tinted by the color flag in flags. The available color flags are progressive, destructive, invert, error, warning and success.

#As a link

Given href, the inner <a> becomes a navigable link and target chooses where it opens. rel defaults to nofollow; when using target="_blank" you should add noopener yourself.

import { Button } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <Button href="https://www.mediawiki.org">MediaWiki</Button>
      <Button href="https://www.mediawiki.org" target="_blank" rel={["nofollow", "noopener"]}>
        Open in a new tab
      </Button>
    </div>
  );
}

export default App;

#Disabled

disabled outputs oo-ui-widget-disabled and aria-disabled (not the native disabled); the button then ignores clicks, its tabindex becomes -1, and href no longer takes effect. Inside a ButtonGroup, the group-level disabled state propagates to the buttons in it.

import { Button } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
      <Button disabled>Disabled</Button>
      <Button icon="check" disabled>
        Disabled (with icon)
      </Button>
    </div>
  );
}

export default App;

#Focus and keyboard

• The focusable element is the inner <a>; the root <span> is not focusable. To focus the button manually, use anchorRef (the component ref points to the outer <span>).
• Enter / Space trigger onClick; onKeyPress prevents Space from scrolling the page whenever a click handler is present.
• The pressed state (oo-ui-buttonElement-pressed) is maintained by the component in JS: CSS has no keyboard-press pseudo-class, so keyboard press and release are handled by explicit event listeners. The pressed prop is OR-ed with it, for cases like "keep the button pressed while its associated menu is open".
• title and accessKey land on the inner <a>; when title is not given and the label is hidden it falls back to the label text, and when accessKey is present a key hint is appended to title (the chord text can be localized via OOUIProvider).

#API

ButtonFlag is 'progressive' | 'destructive' | 'invert' | 'error' | 'warning' | 'success' | 'primary' | 'safe' | 'back' | 'close'; the first six decide tinting, the last four are button-specific form flags.