Search…
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

import { Main, Header, Button } from '@aragon/ui'
function App() {
return (
<Main>
<Header
primary="Tokens"
secondary={<Button mode="strong" label="Add tokens" />}
/>
</Main>
)
}

Props

children

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

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

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.
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.
Last modified 2mo ago
Copy link
On this page
Usage
Props