Page header

The title area at the top of a page, with an optional description and page-level actions.

import {Button, PageHeader} from '@earendil-works/elanor-react';

export default function PageHeaderDemo() {
  return (
    <PageHeader.Root>
      <PageHeader.Row>
        <PageHeader.Title level={2}>Members</PageHeader.Title>
        <PageHeader.Actions>
          <Button hierarchy="secondary">Export</Button>
          <Button>Invite members</Button>
        </PageHeader.Actions>
      </PageHeader.Row>
      <PageHeader.Description>
        Manage who can access this workspace and what they can do.
      </PageHeader.Description>
    </PageHeader.Root>
  );
}

import {PageHeader} from '@earendil-works/elanor-react';

<PageHeader.Root>
  <PageHeader.Row>
    <PageHeader.Title level={1} />
    <PageHeader.Actions />
  </PageHeader.Row>
  <PageHeader.Description />
</PageHeader.Root>;

The title always uses heading size 1. Give it level={1}; the demo uses level={2} because this page already has an H1. Actions wrap below the title when space runs out.

Renders <header>. Accepts its HTML attributes and ref.

Renders <div>. Accepts its HTML attributes and ref.

Renders <h1>–<h6>. Also accepts its HTML attributes and ref.

Renders <div>. Accepts its HTML attributes and ref.

Renders <p>. Accepts its HTML attributes and ref.