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.

Loading...

With Link

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

Loading...

PageActions

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

Loading...

Full Blown Example

All features of PageHeader together.

Loading...

PageContent

Renders the content of the page.

With DataView

Example featuring DataView and DataGrid

Loading...

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