---
title: "Page"
description: "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."
sidebar_label: "Page"
slug: /reference/components/page
---

import ComponentDemo from '@site/src/components/ComponentDemo';

# 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`](https://github.com/flourishhealth/terreno/blob/master/demo/stories/Page.stories.tsx)

## Live demo

<ComponentDemo name="Page" />

## Props

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `backButton` | `boolean` |  |  |
| `children` | `ReactNode` |  |  |
| `closeButton` | `boolean` |  |  |
| `color` | `BoxColor` |  | Page body surface; use  |
| `direction` | `union` |  |  |
| `display` | `union` |  |  |
| `footer` | `ReactNode` |  |  |
| `keyboardOffset` | `number` |  |  |
| `loading` | `boolean` |  |  |
| `loadingText` | `string` |  |  |
| `maxWidth` | `union` |  |  |
| `navigation` | `any` |  |  |
| `onError` | `reflection` |  |  |
| `padding` | `UnsignedUpTo12` |  |  |
| `rightButton` | `string` |  |  |
| `rightButtonOnClick` | `reflection` |  |  |
| `safeArea` | `boolean` |  | When 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. |
| `scroll` | `boolean` |  |  |
| `testID` | `string` |  | Root test id for the primary interactive element or container. |
| `title` | `string` |  |  |