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

      • ButtonGroup

      Source | Original component

      A button group: it lines up several Button elements so adjacent ones connect head-to-tail into a single block.

      Basic usage

      BoldItalicLink
      import { Button, ButtonGroup } from "ooui-react";

function App() {
  return (
    <ButtonGroup>
      <Button icon="bold">Bold</Button>
      <Button icon="italic">Italic</Button>
      <Button icon="link">Link</Button>
    </ButtonGroup>
  );
}

export default App;

      Mixing in toggle buttons

      A group can hold both plain buttons and ToggleButton elements, common in editor toolbars.

      BoldItalicClear formatting
      import { Button, ButtonGroup, ToggleButton } from "ooui-react";

function App() {
  return (
    <ButtonGroup>
      <ToggleButton icon="bold">Bold</ToggleButton>
      <ToggleButton icon="italic">Italic</ToggleButton>
      <Button icon="highlight" flags="destructive">
        Clear formatting
      </Button>
    </ButtonGroup>
  );
}

export default App;

      Group-level disable

      Setting disabled on the group propagates it to every button inside, so you don't have to set each one.

      CopyCutPaste
      import { Button, ButtonGroup } from "ooui-react";

function App() {
  return (
    <ButtonGroup disabled>
      <Button>Copy</Button>
      <Button>Cut</Button>
      <Button>Paste</Button>
    </ButtonGroup>
  );
}

export default App;
      Difference from the original

      The original propagates the group's disabled state by imperatively updating each child button; this library passes disabled down through a React context — the equivalent declarative convenience. A button's effective disabled is the OR of its own state and its group's.

      API

      PropDescriptionTypeDefault
      childrenButtons in the group (Button / ToggleButton, etc.)ReactNode—
      disabledGroup-level disable, propagated to the buttons insidebooleanfalse
      ...restNative div props (className, id, data-*, etc.) passed straight to the rootHTMLAttributes<HTMLDivElement>—

      See also