Page

The header, content and footer of a dashboard page.

Linen shirt

Draft

Title

Page.tsx

import {
  Badge,
  Button,
  Page,
  PageActions,
  PageBack,
  PageContent,
  PageFooter,
  PageHeader,
  PageTitle,
  TextField
} from 'alinea/components'

export function PageExample() {
  return (
    <div style={{display: 'flex', width: 560, height: 320}}>
      <Page>
        <PageHeader>
          <PageBack label="Back to Products" />
          <PageTitle>Linen shirt</PageTitle>
          <Badge status="draft">Draft</Badge>
          <PageActions>
            <Button color="primary">Publish</Button>
          </PageActions>
        </PageHeader>
        <PageContent contained style={{padding: 16}}>
          <TextField label="Title" defaultValue="Linen shirt" />
        </PageContent>
        <PageFooter>
          <Button variant="outline">Cancel</Button>
          <Button>Save</Button>
        </PageFooter>
      </Page>
    </div>
  )
}

Props

`<Page>`

A full height view in the SidebarInset: a PageHeader, a scrolling PageContent and an optional PageFooter.

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<PageHeader>`

The bar at the top of the page, holds an optional PageBack, the PageTitle and PageActions

PropTypeDefaultDescription

size'default' | 'lg'Default 'default'The lg header is taller, as used above entry editors

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<PageBack>`

A back button at the start of the PageHeader

PropTypeDefaultDescription

labelstringDefault 'Back'Accessible label of the button, defaults to "Back"

disabledbooleanDefault –

onClick(event: MouseEvent<HTMLButtonElement>) => voidDefault –

Also accepts className and style and data-* attributes.

`<PageTitle>`

PropTypeDefaultDescription

idstringDefault –

asHeadingProps['as']Default 'h1'The heading element, defaults to h1

Also accepts className and style and data-* attributes.

`<PageActions>`

Controls at the end of the PageHeader

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<PageContent>`

The scrolling body of the page

PropTypeDefaultDescription

containedbooleanDefault –Centers the children in a column of readable width, as used for forms and documents

refRef<HTMLDivElement>Default –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<PageFooter>`

A bar pinned to the bottom of the page, eg. for form actions

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.