Page

Page makes it easy to implement consistent page layouts throughout your app.

Import#

  • Page: The container component that manages composition.
  • PageContainer: The bare container component.
  • PageHeader: The header component with navigation, title, toolbar and tabbar.
  • PageBody: The page content.
  • BackButton: A button with an arrow icon used for navigating to the previous page.
import {
Page,
PageContainer,
PageHeader,
PageBody,
BackButton,
} from '@saas-ui/pro'

Usage#

A Page is usually located in the main content of your layout, under the Navbar and next to the Sidebar. It can include navigation (back button), a title, toolbar and tabs.

The Page component manages composition for you and comes with a handful of helpful features to make creating pages fast and consistent. All sub components are wrapped in an ErrorBoundary, so your apps navigation will always be available to users in case of any unforseen errors.

To have more control over composition, use the low level PageContainer instead.

Basic page#

Page children are wrapped by PageBody automatically. PageBody handles scrolling, content positioning. Content is centered by default with a max width of container.xl.

<Page title="Page" height="200px" />

Loading#

Use the isLoading prop to render a spinner in the middle of the page body.

<Page title="Page" height="200px" isLoading />

Settings variant#

Use different page variants to make it visually clear that people are in a distinct part of your app that functions differently from the main app, like settings pages.

<Page
title="Settings"
description="Manage your settings"
height="200px"
variant="settings"
/>

Hero variant#

The hero variant can be used to showcase features that haven't been activated yet or require extra setup steps.

<Page
title="Inbox"
description="Send and receive messages"
height="200px"
variant="hero"
colorScheme="primary"
/>

Full width page#

<Page title="Page" height="400px" contentWidth="full">
<DataGrid
isHoverable
isSelectable
isSortable
columns={[
{ id: 'name', Header: 'Name' },
{ id: 'role', Header: 'Role' },
{ id: 'actions', width: '100px', Cell: () => <Button>Edit</Button> },
]}
data={[{ name: 'Renata Alink', role: 'Founder' }]}
>
<DataGridPagination />
</DataGrid>
</Page>

With a Toolbar#

The toolbar is positioned on the right side of the page header, next to the title.

The primary action should always be placed on the far right, use a Button with the primary variant. For other toolbar buttons it is recommended to add text labels instead of just icons when possible, this will make sure the actions are easily scannable for people.

<Page
title="Page with toolbar"
height="200px"
toolbar={
<Toolbar>
<Button>Reset</Button>
<Button variant="primary">Save</Button>
</Toolbar>
}
/>

With a Back button#

Add navigation buttons to help people navigate your app, the most common use case is adding a BackButton to go back to the previous page.

<Page title="Page with back button" height="200px" nav={<BackButton />} />

With a Tabs#

<Page
title="Page with tabs"
height="200px"
tabbar={
<Tabs variant="unstyled">
<TabList as={ButtonGroup} isAttached variant="outline">
<Tab
as={Button}
_light={{
_selected: { bg: 'blackAlpha.300' },
}}
_dark={{
_selected: { bg: 'whiteAlpha.300' },
}}
>
Overview
</Tab>
<Tab
as={Button}
_light={{
_selected: { bg: 'blackAlpha.300' },
}}
_dark={{
_selected: { bg: 'whiteAlpha.300' },
}}
>
Settings
</Tab>
</TabList>
</Tabs>
}
/>

Custom Error Component#

Page content is wrapped with an ErrorBoundary to make sure any errors inside your page are contained and users can still navigate your app. Use the errorComponent prop to render a custom error message.

function PageWithError() {
return (
<Page
title="Page with error"
height="200px"
errorComponent={
<EmptyState
icon={FiAlertTriangle}
title="Oops, something went wrong"
description="We have have been notified about the issue."
actions={
<>
<Button>Go back</Button>
</>
}
/>
}
/>
)
}

Props#

The Page component and all sub components accept all Box properties.

Card Props#

contentWidth

Type
ResponsiveValue<Union<number | "px" | (string & {}) | "inherit" | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "-moz-initial" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "2" | "3" | ... 56 more ... | "-webkit-min-content">>

description

Type
ReactNode

errorComponent

Type
ReactNode

fullWidth

Type
boolean

hasError

Type
boolean

isLoading

Type
boolean

nav

Type
ReactNode

skeleton

Type
ReactNode

tabbar

Type
ReactNode

title

Description

The page title

Type
ReactNode

toolbar

Type
ReactNode

Was this helpful?