TextLink

A link, in a sentence or on its own. It has no surface and no height of its own: what it has is the line under it, and a mark for the links that open in a new tab.

import { TextLink } from 'neba';

<TextLink href="/components/">Components</TextLink>
<TextLink href="https://neba.cdget.com/components/" newTab>All components</TextLink>
<TextLink href="/guide/getting-started" underline="hover" color="primary">Getting started</TextLink>;

Props

Prop	Type	Default	Description
href *	string	—	Where the link goes
underline	'always' | 'hover' | 'none'	'always'	When the underline is drawn. always is the default because color is not: with no line there is nothing telling a link from the sentence around it
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	—	Semantic colour role. No default: a link in a paragraph is usually the paragraph’s own colour
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	The type scale. Also no default: a link inside a sentence is the size of the sentence
newTab	boolean	false	Opens in a new tab, with the rel that closes window.opener. Turns icon on and adds a line for a screen reader
icon	ReactNode | boolean	newTab	The mark after the label. true draws the arrow leaving its box when newTab is on and the chain otherwise; a node replaces the glyph
locale	string	'en'	Which language the line for a screen reader is written in: a BCP 47 tag. Unsupported tags fall back to English
render	useRender.RenderProp	—	Renders something other than an a: the Link a router brings, most of the time. href still goes through, so it is written once
children	ReactNode	—	The label

Every other <a> attribute passes through. rel is the one exception: it is merged rather than replaced. See newTab below.

color and size are the two shared axes with no default: a link inside a paragraph is the colour and the size of that paragraph. The rest of the vocabulary is in prop conventions.

The root carries the class neba-link. It is the hook a stylesheet that styles a by name (.prose a, and most CSS frameworks) can exempt: .prose a:not(.neba-link) { … }.

Examples

underline

always is the default, hover draws the line only under the pointer, and none draws none at all. Reach for none where something else is already saying "this is a link": a nav bar, a footer, a row of them under a heading.

import { TextLink } from 'neba';

export default function TextLinkUnderline() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <TextLink href="/components/">always</TextLink>
      <TextLink href="/components/" underline="hover">
        hover
      </TextLink>
      <TextLink href="/components/" underline="none" color="primary">
        none
      </TextLink>
    </div>
  );
}

Hovering changes the line, never the text colour. A word that changes colour under the pointer moves the reader's eye off the line they were reading.

color

With no color the link takes whatever colour the text around it has. Passing one of the six role colours dyes the label and the line together.

import { TextLink } from 'neba';

const COLORS = ['primary', 'secondary', 'success', 'warning', 'danger', 'info'] as const;

export default function TextLinkColors() {
  return (
    <div className="flex flex-col gap-4">
      <p className="m-0 text-[0.8125rem]/[1.375rem]">
        With no <code>color</code> a link is{' '}
        <TextLink href="/components/">the colour of the sentence</TextLink> it sits in.
      </p>

      <div className="flex flex-wrap items-center gap-5">
        {COLORS.map((color) => (
          <TextLink key={color} href="/components/" color={color}>
            {color}
          </TextLink>
        ))}
      </div>
    </div>
  );
}

size

Also unset by default: a link in a sentence is the size of the sentence. Set size for one standing on its own, and it takes the library's type scale with the leading a wrapping line needs.

import { TextLink } from 'neba';

const SIZES = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

export default function TextLinkSizes() {
  return (
    <div className="flex flex-wrap items-baseline gap-5">
      {SIZES.map((size) => (
        <TextLink key={size} href="/components/" size={size} color="primary">
          {size}
        </TextLink>
      ))}
    </div>
  );
}

newTab and icon

newTab sets target="_blank" and the rel that stops the new page reaching back through window.opener. It also turns icon on, because a window changing under the reader is the one thing about a link that cannot be seen until it has happened.

A rel of your own is merged with that rather than replacing it. rel="nofollow" is an SEO decision and not a security one, so writing it never costs the link its noopener: newTab rel="nofollow" comes out as nofollow noopener noreferrer. On a link that stays in the tab, your rel is left exactly as written.

icon overrides that either way: false for a new-tab link with no mark, true for a same-tab link that wants one, or a node of your own to replace the glyph.

import { TextLink } from 'neba';

function DownloadIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none">
      <path
        d="M8 2.75v7m0 0L5.25 7M8 9.75 10.75 7M3 12.5h10"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export default function TextLinkExternal() {
  return (
    <div className="flex flex-wrap items-center gap-6">
      <TextLink href="https://neba.cdget.com/components/" newTab>
        New tab
      </TextLink>
      <TextLink href="https://neba.cdget.com/components/" newTab icon={false}>
        No mark
      </TextLink>
      <TextLink href="/components/" icon>
        Same tab, marked
      </TextLink>
      <TextLink href="/neba.zip" icon={<DownloadIcon />} color="secondary">
        A glyph of its own
      </TextLink>
    </div>
  );
}

locale

newTab adds a line that is read out and never drawn: "(opens in a new tab)". locale is which language it is written in: a BCP 47 tag such as ko, pt-BR or zh-Hant. Tags with no translation fall back to English.

<TextLink href="https://neba.cdget.com/components/" newTab locale="ko">
  모든 컴포넌트
</TextLink>

render

render swaps the element without changing anything else: the Link a router brings, most of the time. href still goes on the TextLink, so it is written once.

import Link from 'next/link';

<TextLink href="/components/" render={<Link href="/components/" />}>
  Components
</TextLink>;

Accessibility

• A link that opens a new tab carries the notice in its accessible name. Set locale so it is read out in the page's own language.
• underline="none" leaves colour as the only thing marking the link, and colour alone is not enough for every reader. Use it where the surrounding layout already says what the element is.
• The focus ring is drawn even with no color: it falls back to the primary ring rather than disappearing.