RecordHeader

Usage examples

import { useState } from 'react';
import { BackLink, Badge, StatusBadge } from '@rookcom/monarch-react';
import { RecordHeader } from '@rookcom/monarch-react/patterns';

const tickets = [
  'Printer offline on floor 3',
  'Invoice shows the wrong address',
  'Reset two-factor',
];

function TicketDemo() {
  const [index, setIndex] = useState(0);
  const [subjects, setSubjects] = useState(tickets);
  return (
    <RecordHeader
      headingLevel="h2"
      back={<BackLink href="#/components/record-header">Inbox</BackLink>}
      navigator={{
        position: { index, total: subjects.length },
        previousLabel: 'Previous ticket',
        nextLabel: 'Next ticket',
        ...(index > 0 ? { onPrevious: () => setIndex(index - 1) } : {}),
        ...(index < subjects.length - 1 ? { onNext: () => setIndex(index + 1) } : {}),
      }}
      title={subjects[index] ?? ''}
      titleLabel="Subject"
      onTitleSave={(next) => setSubjects(subjects.map((s, i) => (i === index ? next : s)))}
      status={<StatusBadge status="info" label="Open" />}
      badges={<Badge tone="warning">High</Badge>}
      subtitle={<span>#{1040 + index} · Opened 2 hours ago by Grace Hopper</span>}
    />
  );
}

<TicketDemo />

import { Button, InlineNotice, StatusBadge } from '@rookcom/monarch-react';
import { RecordHeader } from '@rookcom/monarch-react/patterns';

<RecordHeader
  headingLevel="h2"
  title="Q3 renewal"
  status={<StatusBadge status="neutral" label="Archived" />}
  subtitle="Northfield · Opportunity"
  banner={
    <InlineNotice tone="neutral">
      Archived on 2 May. It no longer appears in pipelines or reports.
    </InlineNotice>
  }
  actions={<Button>Unarchive</Button>}
/>

Purpose

Heads the detail page of one record (a contact, a ticket, a project): a back link and previous/next navigation, an avatar or icon, the title (editable in place), status and badges, a subtitle, key facts, record actions, a state banner (archived, merged) and section tabs. The product supplies all data and callbacks.

Design principles

• Identity first: avatar, name and status read as one block.
• Key facts only: three to six facts that orient, not the whole record.
• State is visible: archived, merged or deleted records say so in the banner, under the identity.
• No business logic: the product decides which actions, facts and neighbours exist.

API reference

import { RecordHeader } from '@rookcom/monarch-react/patterns';

Renders a <header>, forwards its ref and passes native attributes through.

With onTitleSave and a string title, the title is an InlineEditText inside a role="heading" element (a block editor may not sit in an <h1>). titleEditProps passes validate, maxLength and the rest through.

facts render as a DescriptionList with columns="auto" (9rem minimum); copyable and empty placeholders work as there.

navigator is { position?, onPrevious?, onNext?, previousLabel?, nextLabel?, formatPosition? }; a missing handler disables its button. Keyboard shortcuts such as J/K belong to the product.

Exported from @rookcom/monarch-react/patterns.

Generated from the TypeScript declarations of packages/react/src/patterns/crm/record-header.

Properties

Variants

States

Interaction behaviour

• Activating the title (when editable) opens the editor; Enter or blur saves, Escape cancels.
• Previous and next call onPrevious and onNext; the product navigates and updates position.
• Fact copy buttons copy their value.

Keyboard support

Accessibility

Role

banner landmark only when it is not inside main, article or section (native <header> rules)

Accessible name

The title is the page or pane heading.

• The title is an h1 (or h2); an editable title keeps the heading role and level.
• Previous/next are icon buttons with required names; name the record type ("Next ticket").
• Put role="status" content in banner (InlineNotice) so state changes are announced.
• Give an actions menu a specific name: "More actions for Ada Lovelace".
• The live examples on this page render with headingLevel="h2" because the docs page has its own h1; in an app use the default h1.

Responsive behaviour

• The identity block and the actions wrap; actions take the full width under 480px.
• Facts fill as many 9rem columns as fit and become one column at 640px and below.
• Long titles wrap anywhere; the title steps down a size under 480px.
• Actions, navigator and tabs are hidden when printing.

Theme support

• Text, borders and dividers use Monarch semantic tokens, so every theme applies.

Do and don't

Related components

• PageHeader: Headers for pages that are not one record.
• DescriptionList: The facts row; use it in the body for the full record.
• InlineEditText: The editable title.
• SplitInboxLayout: Hosts a RecordHeader (h2) in its detail pane.
• Breadcrumb: An alternative to BackLink in back.

Dependencies

Testing coverage

• Renders back link, avatar, title (h1), status and badges, subtitle, facts (dl with copy and placeholder), actions, banner and tabs; ref forwarding.
• Prev/next: position text, custom labels, disabled first record, keyboard activation.
• Custom position format; no position for an empty list.
• Editable title keeps the heading role; Enter saves, Escape cancels; extra editor props apply.
• A non-text title stays a plain heading.
• Renders on the server.

Tests: packages/react/src/patterns/crm/record-header