> 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.

# HorizontalLayout

> [Source](https://github.com/BearBin1215/ooui-react/tree/main/src/layouts/HorizontalLayout) | [Original component](https://doc.wikimedia.org/oojs-ui/master/js/OO.ui.HorizontalLayout.html "OO.ui.HorizontalLayout")

A horizontal container: it only outputs the `oo-ui-horizontalLayout` root class and leaves the arrangement to the theme CSS; write your own styles (or a plain `div`) when you need exact spacing control.

## Basic usage

```tsx preview
import { Button, HorizontalLayout, TextInput } from "ooui-react";

function App() {
  return (
    <HorizontalLayout>
      <TextInput placeholder="Search…" />
      <Button flags="primary">Search</Button>
    </HorizontalLayout>
  );
}

export default App;
```

## API

Inherits every prop of [Layout](/ooui-react/en/components/layout/index.md) (including the `hidden` three states).

## See also

- The `hidden` three-state semantics of the base class: [Layout](/ooui-react/en/components/layout/index.md)