Server component, no client JS

ImportCopy Anchor Link

import { PageHeader } from '@nizivo/react/page-header';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/page-header.css';

Static or interactiveCopy Anchor Link

Server. PageHeader renders a <header> with no client JavaScript. What you put in actions keeps its own tier: a Button stays server-rendered, a SegmentedControl hydrates. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

One heading per pageCopy Anchor Link

title renders the page's <h1>. The shell's top bar shows the section name as text, not as a second heading. Inside a page whose <h1> is elsewhere, pass level={2}; the title keeps its look.

LayoutCopy Anchor Link

Figma draws the title (Heading/H1) and the controls on one row, 16 px apart and centred, the controls at the row's end. meta sits beside the title, for example a status <Badge>; description is a Body/M line under it. Below the sm breakpoint (40rem) the title takes Heading/H2's size, as 08's mobile frame does, and the controls move to a row of their own. Hooks: --nz-page-header-gap, --nz-page-header-title-font.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Button } from '@nizivo/react/button';
import { SegmentedControl } from '@nizivo/react/segmented-control';
import { PageHeader } from '@nizivo/react/page-header';

/** A stand-in for `@nizivo/icons`' download. */
function Download(): JSX.Element {
  return (
    <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor">
      <path d="M12 15V3M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5" />
    </svg>
  );
}

const RANGES = [
  ['today', 'Today'],
  ['7d', '7D'],
  ['30d', '30D'],
  ['90d', '90D'],
  ['12m', '12M'],
] as const;

export function PageHeaderExample(): JSX.Element {
  return (
    <PageHeader
      title="Good morning, Maya"
      actions={
        <>
          <SegmentedControl.Root aria-label="Range" name="range" defaultValue="30d">
            {RANGES.map(([value, label]) => (
              <SegmentedControl.Item key={value} value={value}>
                {label}
              </SegmentedControl.Item>
            ))}
          </SegmentedControl.Root>
          <Button leadingIcon={<Download />}>Export</Button>
        </>
      }
    />
  );
}

import type { JSX } from 'react';
import { Badge } from '@nizivo/react/badge';
import { Button } from '@nizivo/react/button';
import { PageHeader } from '@nizivo/react/page-header';

export function PageHeaderDetailExample(): JSX.Element {
  return (
    <PageHeader
      title="Stoneware mug"
      meta={<Badge tone="success">Active</Badge>}
      description="Last edited today at 09:12"
      actions={
        <>
          <Button>Preview</Button>
          <Button variant="primary">Save</Button>
        </>
      }
    />
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

PageHeaderProps type

import type { PageHeaderProps } from '@nizivo/react/page-header'

The props of PageHeader, listed above.

PageHeaderTitleLevel type

import type { PageHeaderTitleLevel } from '@nizivo/react/page-header'

type PageHeaderTitleLevel = 1 | 2

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

Layers: nz.components. Classes: .nz-page-header, .nz-page-header-actions, .nz-page-header-content, .nz-page-header-description, .nz-page-header-heading, .nz-page-header-meta, .nz-page-header-title.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

Source: Native elements only; no engine. Checked by the browser lane (test/browser/table.spec.tsx) in Chromium, Firefox and WebKit.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none