ABBA UIv0.1.0
Typography

Link

A navigational hyperlink.

Server-renderable1 export

Renders a plain anchor, so it composes with any router. External links get `rel="noopener noreferrer"`, an arrow glyph, and visually-hidden text announcing the new tab.

Import

import { Link } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/link.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Internal and external

DocumentationExternal site(opens in a new tab)Always underlined
<Inline gap={4}>
  <Link href="/docs">Documentation</Link>
  <Link href="https://example.com" external>External site</Link>
</Inline>

Props

Link props. All native attributes of the underlying element are also accepted and forwarded.
PropTypeDefaultDescription
underline"always" | "hover" | "none""hover"Underline behaviour.
externalbooleanfalseOpens in a new tab with a safe rel, an icon, and an announcement.
externalLabelstring"(opens in a new tab)"Text announced after an external link's label.

Accessibility

  • External links announce that they open a new tab, rather than only showing an icon.
  • `noopener` prevents the opened page reaching back through `window.opener`.
  • Link text should make sense out of context — avoid “click here”.