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#