Mobile header
Top chrome for a screen: an optional back affordance on the left, a centered title, and at most one primary action on the right — all within one-handed reach. It owns the top safe-area inset.
With back and action
Order detail
<MobileHeader title="Order detail" onBack={() => history.back()} action={<Button size="touch" variant="ghost">Edit</Button>}/>Title only
Home
<MobileHeader title="Home" />The title stays optically centered whether or not a back button or action is present.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
title | ReactNode | — | Rendered as the screen’s single h1. |
onBack | () => void | — | Shows a back button that calls this. |
backLabel | string | 'Back' | Accessible label for the back button. |
leading | ReactNode | — | Custom left slot; overrides the back button. |
action | ReactNode | — | The single right-hand action. |