SectionHeader

Usage examples

import { Button, SectionHeader } from '@rookcom/monarch-react';

// PlusIcon: demo icon from the docs site; use your own.

<SectionHeader
  size="md"
  title="Team members"
  description="People who can sign in to this workspace."
  actions={
    <Button size="sm" variant="primary" leadingIcon={<PlusIcon />}>
      Invite
    </Button>
  }
/>

import { useEffect, useState } from 'react';
import { Button, SectionHeader } from '@rookcom/monarch-react';

function BusyDemo() {
  const [busy, setBusy] = useState(false);
  useEffect(() => {
    if (!busy) return;
    const t = setTimeout(() => setBusy(false), 1500);
    return () => clearTimeout(t);
  }, [busy]);
  return (
    <SectionHeader
      title="Traffic sources"
      meta="Last 7 days"
      busy={busy}
      actions={
        <Button size="xs" onClick={() => setBusy(true)}>
          Refresh
        </Button>
      }
    >
      <ul style={{ margin: 0, paddingInlineStart: '1.25rem' }}>
        <li>Search</li>
        <li>Direct</li>
        <li>Referral</li>
      </ul>
    </SectionHeader>
  );
}

<BusyDemo />

Purpose

Titles a section of a page or dashboard without drawing a box around it: a heading, an optional description and meta line, and trailing actions or a "View all" link. With content it becomes the labelled section itself.

Design principles

• Unboxed: it adds no border or background, so it works on the page, inside a Card or in a split pane.
• The heading level is chosen by the page outline (headingLevel), never by size; size is size.
• Secondary text is quiet: description in muted text, meta smaller still.
• Trailing content stays on the title row while it fits and wraps under it on narrow screens.

API reference

import { SectionHeader, SectionHeaderLink } from '@rookcom/monarch-react';

Without children it renders <div class="mn-section-header"> with the header row; with children it renders <section aria-labelledby> with the row and a .mn-section-header__body. The ref goes to the root either way.

SectionHeaderLink renders an <a> (or your router link with asChild) with a decorative arrow.

Generated from the TypeScript declarations of packages/react/src/components/layout/section-header.

Properties

Variants

States

Interaction behaviour

• No behaviour of its own. Actions and links are ordinary controls in reading order after the title.
• Busy is driven by the product; content stays mounted while it dims.

Keyboard support

SectionHeader adds no key handling; the slotted controls keep their own.

Accessibility

Role

region (with children, via <section aria-labelledby>), otherwise none

Accessible name

The heading. Pass headingId to label another element with it.

• Choose headingLevel so the outline does not skip levels.
• With busy, aria-busy is set on the root and the spinner is a named status.
• The link arrow is aria-hidden; write link text that makes sense alone ("View all invoices").

Responsive behaviour

• The row wraps: when the title and trailing controls do not fit, the controls move under the text (flex-wrap).
• Long titles wrap instead of overflowing (overflow-wrap: anywhere), so there is no horizontal scrolling at 320px.

Theme support

• Text uses --mn-color-text-default and --mn-color-text-muted; no surfaces of its own, so it inherits the page or card behind it in every theme.
• The link focus ring uses --mn-color-focus-ring; the dim transition uses duration tokens, which are zero under reduced motion.

Do and don't

Related components

• PageHeader: The page title, with breadcrumbs and page actions.
• SettingsSection: A titled card of settings rows with a footer.
• Card: Boxes a section; put a SectionHeader inside it for actions.
• SectionCard: Planned card with a standard header and actions.

Dependencies

Testing coverage

• Renders title (h2), description, meta, actions and the trailing link; Tab order is actions then link; no region without children.
• With children it is a region labelled by its heading, honouring headingLevel and headingId.
• Busy sets aria-busy and data-busy and shows a named spinner, and clears when done.
• Forwards the ref, passes attributes through and exposes size.
• SectionHeaderLink renders a router link with asChild, with a hidden arrow.
• Renders on the server.

Tests: packages/react/src/components/layout/section-header