Actions

Text link

The underlined action under a story: Continue reading, Learn more. The underline fades on hover rather than appearing.

components/coach/text-link.tsx

Examples

Learn more
Dark
Continue reading
Light, on photography

Anatomy

  1. 0153 Extended, 12px
  2. 021px underline, 4px offset

Usage

components/coach/text-link.tsx
import { TextLink } from "@/components/coach/text-link";

<TextLink href="/stories/coffee">Continue reading</TextLink>
<TextLink href="/stories/fall" tone="light">Continue reading</TextLink>

Props

PropTypeDefaultDescription
href*LinkProps['href']—Where it goes. It is a next/link.
tone"dark" | "light""dark"Light for links set on photography.
...propsComponentProps<typeof Link>—Anything next/link accepts.

Guidance

Do

  • Keep labels to two or three words.
  • Place it last in a story's text stack.

Don't

  • Use it inside running text; body links are plain underlines.

Where it's used