Language

Appearance

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.

Laura Gómez

CC 1.020.304.05034 yearsSura EPS

Book

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.

General consultation

Active

General medicine20 minutes3 active agendas

Book

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"
/>

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

Campaigns

Running

WhatsApp · 1,240 contacts · running since Monday

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, which the library’s tests render too.

Record header

Patient

Service with a status

Renamed in place, with a pager

Source