Skip to main content
Version: 57.2.0

Page

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.

Package: @terreno/ui
Categories: Component
Props interface: PageProps
Story source: demo/stories/Page.stories.tsx

Live demo

Props

PropTypeRequiredDescription
backButtonboolean
childrenReactNode
closeButtonboolean
colorBoxColorPage body surface; use
directionunion
displayunion
footerReactNode
keyboardOffsetnumber
loadingboolean
loadingTextstring
maxWidthunion
navigationany
onErrorreflection
paddingUnsignedUpTo12
rightButtonstring
rightButtonOnClickreflection
safeAreabooleanWhen true, wraps content in SafeAreaView so it respects top/bottom device insets (camera notches, home indicator, status bar). Opt-in to avoid regressing existing screens that handle insets at the navigation level.
scrollboolean
testIDstringRoot test id for the primary interactive element or container.
titlestring