Page

What is this?

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

Composition

Name	Description
Page	Outlines the page area
PageHeader	Users rely on the page header to navigate and orient themselves within the admin
PageHeaderTop	This component is used to group elements to the top part of the PageHeader
PageHeaderBottom	This component is used to group elements to the bottom part of the PageHeader
PageContent	Renders the content of the page

Variants

With title

This is the basic usage. Use the PageHeaderTitle within the PageHeaderTop to render the page title.

Product #123

With back-link

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

Product #123

With tags

You can also render components within the PageHeaderTitle, such as a Tag elements using the PageHeaderTags and PageHeaderTag composites.

Product #123

Short text

With actions

Use the PageHeaderActions composite within the PageHeaderTop to add actions that are relevant for the whole page. Actions can be either PageHeaderButton or PageHeaderMenuButton, along with the Menu composites.

Product #123

With tabs

If you ever need tabs on your PageHeader, locate them within the PageHeaderBottom component.

See the Full example section for a full example with tabs.

Product #123

Full example

Example featuring DataView and Table

Product #123

Short text

Product Name	In Stock	SKUs	Price
Banana	380	0	80
Lemon	380	26	500
Tomato	380	25	100

Usage

Import

import {
  Page,
  PageHeader,
  PageHeaderTop,
  PageHeaderTitle,
  PageHeaderTags,
  PageHeaderTag,
  PageHeaderActions,
  PageHeaderButton,
  PageHeaderMenuButton,
  PageHeaderBottom,
  PageContent,
} from '@vtex/admin-ui'

Anatomy

Page
|__ PageHeader
|   |__ PageHeaderTop
|   |   |__ PageHeaderTitle
|   |   |  |__ PageHeaderTags
|   |   |      |__ PageHeaderTag
|   |   |__ PageHeaderActions
|   |       |__ PageHeaderButton
|   |       |__ PageHeaderMenuButton
|   |       |__ Menu
|   |           |__ MenuItem
|   |__ PageHeaderBottom
|       |__ TabList
|           |__ Tab
|
|__PageContent
   |__ (...Some view)

Props

Page

All props of div JSX element

Name	Type	Description	Required	Default
layout	wide, standard and narrow	A set of paddings and maximum widths.	🚫	standard

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	🚫	🚫

PageHeaderTop

All props of div JSX element

PageHeaderTitle

All props of div JSX element

PageHeaderTags

All props of Stack Admin UI component with overriden defaults:

Name	Default
direction	row
space	$m

PageHeaderTag

All props of Tag Admin UI component with overriden defaults:

Name	Default
size	large

PageHeaderActions

All props of div JSX element

PageHeaderButton

All props of Button Admin UI component with overriden defaults:

Name	Default
size	large

PageHeaderMenuButton

All props of MenuButton Admin UI component with overriden defaults:

Name	Default
size	large
variant	tertiary
labelHidden	true
bleedX	true

PageHeaderBottom

All props of div JSX element

• What is this?
• Composition
• Variants
  • With title
  • With tags
  • With actions
  • Full example