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">>
Page
Page makes it easy to implement consistent page layouts throughout your app.
- Beta
Get Pro
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.
<Pagetitle="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.
<Pagetitle="Inbox"description="Send and receive messages"height="200px"variant="hero"colorScheme="primary"/>
Full width page#
<Page title="Page" height="400px" contentWidth="full"><DataGridisHoverableisSelectableisSortablecolumns={[{ 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.
<Pagetitle="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#
<Pagetitle="Page with tabs"height="200px"tabbar={<Tabs variant="unstyled"><TabList as={ButtonGroup} isAttached variant="outline"><Tabas={Button}_light={{_selected: { bg: 'blackAlpha.300' },}}_dark={{_selected: { bg: 'whiteAlpha.300' },}}>Overview</Tab><Tabas={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 (<Pagetitle="Page with error"height="200px"errorComponent={<EmptyStateicon={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
contentWidth
description
description
ReactNode
errorComponent
errorComponent
ReactNode
fullWidth
fullWidth
boolean
hasError
hasError
boolean
isLoading
isLoading
boolean
nav
nav
ReactNode
skeleton
skeleton
ReactNode
tabbar
tabbar
ReactNode
title
title
The page title
ReactNode
toolbar
toolbar
ReactNode
Was this helpful?