---
title: "Record header"
description: "The head of a record’s page, from data: its avatar or icon, its name as the page’s title with its status, a line of facts, and its actions: the common ones in outline, the next step filled and the rest in a ⋯ menu. RecordPage draws it; use it alone in a page laid out by hand."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Record header

## Patient

Facts come as a list: empty ones are skipped and the rest set apart by dots. On a phone, outline actions keep only their icon.

```tsx
import { ArchiveIcon, CalendarPlusIcon, ChatCircleTextIcon, FileArrowDownIcon, PhoneIcon } from '@phosphor-icons/react';
import { Avatar, RecordHeader } from '@arbol-ai/ui';

<RecordHeader
  actions={[
    { label: 'Call', icon: <PhoneIcon />, href: 'tel:+573005550101' },
    {
      label: 'WhatsApp',
      icon: <ChatCircleTextIcon />,
      href: 'https://wa.me/573005550101',
      target: '_blank',
    },
  ]}
  avatar={<Avatar name="Laura Gómez" size="xl" />}
  menu={[
    { label: 'Export record', icon: <FileArrowDownIcon /> },
    { label: 'Archive patient', icon: <ArchiveIcon />, isDestructive: true },
  ]}
  menuLabel="More actions for Laura Gómez"
  meta={['CC 1.020.304.050', '34 years', null, 'Sura EPS']}
  primaryAction={{ label: 'Book', icon: <CalendarPlusIcon />, href: '#/record-header' }}
  title="Laura Gómez"
/>
```

## Service with a status

An icon tile stands in for the avatar; the status sits beside the name.

```tsx
import { StethoscopeIcon } from '@phosphor-icons/react';
import { Badge, RecordHeader } from '@arbol-ai/ui';

<RecordHeader
  avatar={
    <span className="rounded-card bg-brand-tint text-brand-accent grid size-12 shrink-0 place-content-center">
      <StethoscopeIcon aria-hidden className="size-6" />
    </span>
  }
  meta={['General medicine', '20 minutes', '3 active agendas']}
  primaryAction={{ label: 'Book', href: '#/record-header' }}
  status={<Badge tone="success">Active</Badge>}
  title="General consultation"
/>
```

## Renamed in place, with a pager

onTitleChange makes the name editable: press it, Enter saves, Esc puts it back. K and J move to the previous and next campaign.

```tsx
import { PauseIcon, TrashIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import { Badge, Link, RecordHeader } from '@arbol-ai/ui';

const CampaignHeader = () => {
  const [name, setName] = useState('Spring check-up reminders');
  return (
    <RecordHeader
      actions={[{ label: 'Pause', icon: <PauseIcon /> }]}
      back={
        <Link href="#/record-header" variant="muted">
          Campaigns
        </Link>
      }
      menu={[{ label: 'Delete campaign', icon: <TrashIcon />, isDestructive: true }]}
      menuLabel={`More actions for ${name}`}
      meta="WhatsApp · 1,240 contacts · running since Monday"
      onTitleChange={setName}
      pager={{
        label: 'Move between campaigns',
        nextHref: '#/record-header',
        position: 3,
        previousHref: '#/record-header',
        total: 12,
      }}
      status={<Badge tone="success">Running</Badge>}
      title={name}
      titleLabel="Campaign name"
    />
  );
};

<CampaignHeader />
```

## Source

The examples above are [`src/blocks/record-header/record-header.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/record-header/record-header.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/record-header/index.mdx