Page

A page consists of the following components:

• Page
  • The container for the entire page.
• PageHeader
  • The container, renders a header tag.
• PageHeaderIconTile
  • An icon tile displayed to the left of the title.
• PageHeaderLabel
  • A status label displayed to the right of the title.
• PageHeaderTitle
  • The title of the page header.
• PageHeaderTitleAction
  • A slot for an inline action (e.g. an edit button) displayed to the right of the title (after PageHeaderLabel if present).
• PageHeaderActions
  • The actions to be displayed on the right side of the page header. It should contain Button components.
• PageHeaderDescription
  • The description of the page header.
• PageHeaderTabs
  • The tabs to be displayed below the page header. It should contain a Tabs component.
• PageBody
  • The container for the body of the page.

You can mix and match these components to create a simple or complex page header. At minimum you should have a PageHeader, PageHeaderTitle, and PageBody.

Importing

import {
	Page,
	PageHeader,
	PageHeaderIconTile,
	PageHeaderLabel,
	PageHeaderTitle,
	PageHeaderTitleAction,
	PageHeaderActions,
	PageHeaderDescription,
	PageHeaderTabs,
	PageBody,
} from '@customerio/pluma-components/react';

Example

<Page>
	<PageHeader>
		<PageHeaderIconTile name="document" />
		<PageHeaderLabel color="yellow" showStatusIndicator={true}>Draft</PageHeaderLabel>
		<PageHeaderTitle>Page Title</PageHeaderTitle>
		<PageHeaderTitleAction>
			<Button variant="subtle" size="sm" icon="edit" isIconOnly={true} />
		</PageHeaderTitleAction>
		<PageHeaderActions>
			<Button variant="primary">Save</Button>
			<Button variant="secondary">Cancel</Button>
		</PageHeaderActions>
		<PageHeaderDescription>This is a description of the page.</PageHeaderDescription>
		<PageHeaderTabs>
			<TabNav
				tabs={[
					{ href: '#', text: 'Label' },
					{ href: '#', text: 'Label', isActive: true },
					{ href: '#', text: 'Label' },
					{ href: '#', text: 'Label' },
				]}
			/>
		</PageHeaderTabs>
	</PageHeader>
	<PageBody>
		<p>This is the body of the page.</p>
	</PageBody>
</Page>

PageHeaderIconTile

An icon tile displayed to the left of the title.

<PageHeaderIconTile name="document" />

PageHeaderLabel

A status label displayed to the right of the title.

<PageHeaderLabel color="yellow" showStatusIndicator={true}>Draft</PageHeaderLabel>

PageHeaderTitleAction

A slot for an inline action displayed to the right of the title (after PageHeaderLabel if present) — typically an edit button or other affordance that operates on the page subject.

<PageHeaderTitleAction>
	<Button variant="subtle" size="sm" icon="edit" isIconOnly={true} />
</PageHeaderTitleAction>

PageBreadcrumbs (deprecated)

PageBreadcrumbs is deprecated and will be removed in the next major release. It still renders — it lives as a sibling of PageHeader inside Page, not inside the header grid — so existing pages keep working without changes.

For new code, render the standalone Breadcrumbs component above the page header yourself instead.

import { Breadcrumbs, BreadcrumbsItem } from '@customerio/pluma-components/react';

<Breadcrumbs>
	<BreadcrumbsItem href="/">Home</BreadcrumbsItem>
	<BreadcrumbsItem href="/settings">Settings</BreadcrumbsItem>
</Breadcrumbs>
<Page>...</Page>

Full screen page

The Page component can be full screen by passing the isFullScreen prop.

<Page isFullScreen={true}>...</Page>

Page loading state

The Page component can be in a loading state by passing the isLoading prop.

<Page isLoading={true}>...</Page>

Page body loading state

When the page is full screen or has tabs, the page looks better with just the body in a loading state. This gives the user more of an anchor for the page. You can pass the isLoading prop to the PageBody component to achieve this.

<Page>
	<PageBody isLoading={true}>...</PageBody>
</Page>