Page is a full-screen layout container with an optional header, footer, back/close buttons, and loading state. It handles scrolling, keyboard avoidance, and max-width centering.
Page Title
Title
Loading
Usage Guidelines
Do
Use as the root layout for every screen.
Pass loading={true} to show a centered spinner while data is fetching.
Pass loadingText (e.g. loadingText="Saving…") to display a message beneath the spinner.
Don't
Do not nest Page components.
Do not use loading and children simultaneously — the loading state replaces content.
Props
Name
Type
Required
Description
backButton
boolean
children
ReactNode
closeButton
boolean
color
BoxColor
Page body surface; use
direction
display
footer
ReactNode
keyboardOffset
number
loading
boolean
loadingText
string
maxWidth
navigation
any
onBack
When set, invoked instead of
onError
padding
UnsignedUpTo12
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Box, Spinner
Examples
LoadingBoolean
Shows a centered spinner when loading is true.
Loading Page
LoadingText
Shows a centered spinner with a message beneath it when loadingText is provided.