> For the complete documentation index, see [llms.txt](https://legacy-docs.aragon.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://legacy-docs.aragon.org/developers/tools/aragonui/navigation/header.md).

# Header

`Header` is the top part of an app, generally containing the app title and a main action. It is generally declared first in `Main`, and only once.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { Main, Header, Button } from '@aragon/ui'

function App() {
  return (
    <Main>
      <Header
        primary="Tokens"
        secondary={<Button mode="strong" label="Add tokens" />}
      />
    </Main>
  )
}
```

## Props <a href="#props" id="props"></a>

#### `children` <a href="#children" id="children"></a>

| TYPE         | DEFAULT VALUE |
| ------------ | ------------- |
| `React node` | None          |

Sets the entire content of `Header`. Overrides both `primary` and `secondary` and their default styling. You should generally prefer using `primary` and `secondary`, when possible.

#### `primary` <a href="#primary" id="primary"></a>

| TYPE         | DEFAULT VALUE |
| ------------ | ------------- |
| `React node` | None          |

The left part of `Header` (for left-to-right languages). It is generally where the title of an app is set.

#### `secondary` <a href="#secondary" id="secondary"></a>

| TYPE         | DEFAULT VALUE |
| ------------ | ------------- |
| `React node` | None          |

The right part of `Header` (for left-to-right languages). It is generally where the main action of an app is set.

{% hint style="info" %}
Note: when a `Button` is used here, containing both a `label` and an `icon`, it will automatically adapt its `display` to the available width, displaying either the label or the icon. To override this behavior, set the `display` prop of the `Button` to something else than `auto`.
{% endhint %}