Linked heading

A heading with a button that copies a link to it, for long pages that people share by section, such as documentation. For other headings, use Heading.

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

export default function LinkedHeadingDemo() {
  return (
    <LinkedHeading level={2} size={4} id="billing" linkLabel="Copy link to Billing">
      Billing
    </LinkedHeading>
  );
}

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

<LinkedHeading level={2} id="billing" linkLabel="Copy link to Billing">
  Billing
</LinkedHeading>;

Linked heading takes Heading’s props plus a required id and linkLabel. The button follows the heading’s last word, semantic.dimension.space.gap.small away. Pressing it copies the heading’s absolute URL and moves the page to the heading, so the address bar shows the link too.

The button shows on hover, on keyboard focus, after a tap or click on the heading, and while it confirms a copy, on every device; the heading takes focus without joining the tab order (tabIndex={-1}). On touch screens the button is a 48px target.

Inside Prose, a linked heading gets the same space as a plain heading of its level.

import {LinkedHeading, Prose, Text} from '@earendil-works/elanor-react';

export default function LinkedHeadingProse() {
  return (
    <Prose>
      <Text>Invoices go to the billing contact on the first day of each month.</Text>
      <LinkedHeading
        level={3}
        size={3}
        id="payment-methods"
        linkLabel="Copy link to Payment methods"
      >
        Payment methods
      </LinkedHeading>
      <Text>Add a card or pay by bank transfer. Cards are charged when the invoice is issued.</Text>
    </Prose>
  );
}

On pages rendered on the server without React in the browser, the same component works with two behaviors: the copy button’s, which copies the heading’s absolute URL, and the linked heading’s, which moves the page to the heading.

import {createCopyButton, createLinkedHeading, enhance} from '@earendil-works/elanor-react';

enhance({'copy-button': createCopyButton, 'linked-heading': createLinkedHeading});

A heading followed by a button that copies the heading's link and moves the page to it. The button shows on hover, on keyboard focus, after a tap or click on the heading, and while it confirms a copy. ref and the heading props go to the heading; className goes to the wrapper.

Renders <div>. Also accepts its HTML attributes and ref.