InlineLinks

A wrapping row of links joined by a separator.

Overview

A footer or a row of related links: Privacy, Terms, Contact.

Footer

Do
import { InlineLinks, TextLink } from "@hackcove/ui";

<InlineLinks>
  <TextLink href="#privacy">Privacy</TextLink>
  <TextLink href="#terms">Terms</TextLink>
  <TextLink href="#contact">Contact</TextLink>
</InlineLinks>
A row of links is InlineLinks: it spaces them, wraps them and hides the separator from a screen reader.
Don't
import { Body, TextLink } from "@hackcove/ui";

<Body as="p">
  <TextLink href="#privacy">Privacy</TextLink> | <TextLink href="#terms">Terms</TextLink> |{" "}
  <TextLink href="#contact">Contact</TextLink>
</Body>
Separators typed by hand are read aloud and can wrap onto the end of a line.

Usage

  • Put one TextLink per child. The row wraps and spaces them.
  • separator is · (default), • or none.
  • Never type the separators yourself: they wrap onto the end of a line and a screen reader reads them.
  • A row of facts that are not links is a MetaList.

Accessibility

  • The separators are aria-hidden and lead every link but the first, held to their link so a wrap never leaves one at the end of a line.
  • Each link keeps its own focus ring; the row adds no extra tab stop.
  • aria-* and data-* go on the root.

API

InlineLinks

A wrapping row of links, small text, joined by a separator. The separator is aria-hidden and leads each link but the first, held to its link so a wrap never leaves one at a line's end.

separator
Type
"none" | "·" | "•"
Default
·