Page
- The container for the entire page.
PageBreadcrumbs
- The breadcrumbs to be displayed above the page header. It should contain a Breadcrumbs component.
PageHeader
- The container, renders a header tag.
PageHeaderIconTile
- An icon tile displayed to the left of the title.
PageHeaderLabel
- A status label displayed next to the title.
PageHeaderTitle
- The title of the page header.
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

The components can be imported via:

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

Example

<Page>
	<PageBreadcrumbs>
		<Breadcrumbs
			breadcrumbs={[
				{ text: 'Page 1', href: '#' },
				{ text: 'Page 2', href: '#' },
				{ text: 'Page 3', href: '#' },
				{ text: 'Page 4', href: '#' },
			]}
		/>
	</PageBreadcrumbs>
	<PageHeader>
		<PageHeaderIconTile name="document" />
		<PageHeaderLabel color="yellow" showStatusIndicator={true}>Draft</PageHeaderLabel>
		<PageHeaderTitle>Page Title</PageHeaderTitle>
		<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 next to the title.

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

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>

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>

API

`PlumaPage` `extends Box`

`isFullScreen` `boolean | undefined`

Whether the page should be full screen.

`isLoading` `boolean | undefined`

Whether the page is loading.

`PlumaPageHeaderTitle` `extends Text`

`level` `"1" | "2" | "3" | "4" | "6" | "5" | undefined`

Default:1

The level of the heading (which maps to h1-h6 tags)

`PlumaPageHeaderIconTile`

`color` `PageHeaderIconTileColor | undefined`

Default:'teal'

The color of the icon tile.

`name` `IconName` (required)

The name of the icon to render.

`PlumaPageHeaderIcon` `extends Icon`

`color` `"critical" | "caution" | "success" | "bold" | "button" | "navigation" | "inherit" | "white" | "information" | "feature" | "disabled" | "accent" | "base" | "invert" | "subtle" | "minimal" | undefined`

`inlineAlignment` `"uppercase" | "lowercase" | undefined`

`isInline` `boolean | undefined`

`label` `string | undefined`

`name` `IconName` (required)

`preferFilled` `boolean | undefined`

Whether the filled version of an icon should be used, if available

`size` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

`sizeVersion` `"v1" | "v2" | undefined`

`PageHeaderLabel` `extends Label`

`bold` `boolean | undefined`

Default:true

Whether the label should render in a bold font weight

`color` `"outline" | "blue" | "green" | "grey" | "plum" | "purple" | "red" | "teal" | "yellow" | "raspberry" | "clementine" | undefined`

Default:grey

The visual style of the label. Note: When using status indicators, only red, yellow, green, blue, purple, and grey colors are supported.

`showStatusIndicator` `boolean | undefined`

Default:false

Whether the label should show a status indicator colored dot

`PlumaPageBody` `extends Box`

`isLoading` `boolean | undefined`

Whether the page body is loading.

Page

Importing

Example

PageHeaderIconTile

PageHeaderLabel

Full screen page

Page loading state

Page body loading state

API

`PlumaPage` `extends Box`

`isFullScreen` `boolean | undefined`

`isLoading` `boolean | undefined`

`PlumaPageHeaderTitle` `extends Text`

`level` `"1" | "2" | "3" | "4" | "6" | "5" | undefined`

`PlumaPageHeaderIconTile`

`color` `PageHeaderIconTileColor | undefined`

`name` `IconName` (required)

`PlumaPageHeaderIcon` `extends Icon`

`color` `"critical" | "caution" | "success" | "bold" | "button" | "navigation" | "inherit" | "white" | "information" | "feature" | "disabled" | "accent" | "base" | "invert" | "subtle" | "minimal" | undefined`

`inlineAlignment` `"uppercase" | "lowercase" | undefined`

`isInline` `boolean | undefined`

`label` `string | undefined`

`name` `IconName` (required)

`preferFilled` `boolean | undefined`

`size` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

`sizeVersion` `"v1" | "v2" | undefined`

`PageHeaderLabel` `extends Label`

`bold` `boolean | undefined`

`color` `"outline" | "blue" | "green" | "grey" | "plum" | "purple" | "red" | "teal" | "yellow" | "raspberry" | "clementine" | undefined`

`showStatusIndicator` `boolean | undefined`

`PlumaPageBody` `extends Box`

`isLoading` `boolean | undefined`

On this page

Page

PlumaPage extends Box

isFullScreen boolean | undefined

isLoading boolean | undefined

PlumaPageHeaderTitle extends Text

level "1" | "2" | "3" | "4" | "6" | "5" | undefined

color PageHeaderIconTileColor | undefined

name IconName (required)

PlumaPageHeaderIcon extends Icon

color "critical" | "caution" | "success" | "bold" | "button" | "navigation" | "inherit" | "white" | "information" | "feature" | "disabled" | "accent" | "base" | "invert" | "subtle" | "minimal" | undefined

inlineAlignment "uppercase" | "lowercase" | undefined

isInline boolean | undefined

label string | undefined

name IconName (required)

preferFilled boolean | undefined

size "fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined

sizeVersion "v1" | "v2" | undefined

PageHeaderLabel extends Label

bold boolean | undefined

color "outline" | "blue" | "green" | "grey" | "plum" | "purple" | "red" | "teal" | "yellow" | "raspberry" | "clementine" | undefined

showStatusIndicator boolean | undefined

PlumaPageBody extends Box

isLoading boolean | undefined

On this page

`PlumaPage` `extends Box`

`isFullScreen` `boolean | undefined`

`isLoading` `boolean | undefined`

`PlumaPageHeaderTitle` `extends Text`

`level` `"1" | "2" | "3" | "4" | "6" | "5" | undefined`

`color` `PageHeaderIconTileColor | undefined`

`name` `IconName` (required)

`PlumaPageHeaderIcon` `extends Icon`

`color` `"critical" | "caution" | "success" | "bold" | "button" | "navigation" | "inherit" | "white" | "information" | "feature" | "disabled" | "accent" | "base" | "invert" | "subtle" | "minimal" | undefined`

`inlineAlignment` `"uppercase" | "lowercase" | undefined`

`isInline` `boolean | undefined`

`label` `string | undefined`

`name` `IconName` (required)

`preferFilled` `boolean | undefined`

`size` `"fill" | "xxs" | "xl" | "xs" | "sm" | "md" | "lg" | undefined`

`sizeVersion` `"v1" | "v2" | undefined`

`PageHeaderLabel` `extends Label`

`bold` `boolean | undefined`

`color` `"outline" | "blue" | "green" | "grey" | "plum" | "purple" | "red" | "teal" | "yellow" | "raspberry" | "clementine" | undefined`

`showStatusIndicator` `boolean | undefined`

`PlumaPageBody` `extends Box`

`isLoading` `boolean | undefined`