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.import { Main, Header, Button } from '@aragon/ui'
function App() {
return (
<Main>
<Header
primary="Tokens"
secondary={<Button mode="strong" label="Add tokens" />}
/>
</Main>
)
}
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.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.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 6mo ago