Page

Page is a pattern that represents a complete screen of an admin application. You can use the following utility components to achieve consistency easily.

Import

import {
  Page,
  PageHeader,
  PageTitle,
  PageActions,
  PageContent,
} from '@vtex/admin-ui'

Anatomy

Page
|__ PageHeader
|   |__ PageTitle
|   |__ (...custom elements)
|   |__ PageActions
|       |__ Button
|
|__PageContent
   |__ (...Some view)

Behavior

<Page>
  <PageHeader>
    <PageTitle>Page Title</PageTitle>
  </PageHeader>
  <PageContent csx={{ padding: 5 }}>
    <Box>Page Content</Box>
  </PageContent>
</Page>

PageHeader

Users rely on the page header to navigate and orient themselves within the admin.

PageTitle

This is the basic usage. Use the PageTitle to render the page title.

ReferenceError: PageTitle is not defined

With Link

The back-link is present if the onPopNavigation property is passed.

ReferenceError: PageTitle is not defined

PageActions

Use the PageActions composite to add actions that are relevant for the whole page.

ReferenceError: PageTitle is not defined

Full Blown Example

All features of PageHeader together.

ReferenceError: PageTitle is not defined

PageContent

Renders the content of the page.

With DataView

Example featuring DataView and DataGrid

ReferenceError: useDataGridState is not defined

Types

Page

All props of div jsx element

PageContent

All props of div jsx element

PageHeader

All props of header jsx element

Name	Type	Description	Required	Default
onPopNavigation	() => void	Action when back button is clicked	🚫	🚫

PageTitle

All props of div jsx element

PageActions

All props of div jsx element