Steph Huynh

● Primitives / ExternalLink

ExternalLink.

ExternalLink is an anchor with consistent hover styles and an optional ↗ icon. It centralizes external URL handling across about, contact, footer, documentation, and case studies.

How the primitive behaves

http and https hrefs default to target="_blank" and rel="noopener noreferrer" with the icon shown. Plain prose links without an icon can use the link utility on a normal anchor instead.

Source of truth

Custom primitive in system/primitives/external-link. Pairs with the link @utility in app.css for underline variant.

Open in Storybook →

Primitive roles

External navigation

GitHub, LinkedIn, Calendly, and Storybook with ↗ icon and new-tab semantics.

Prose link

Underline variant aligns with the site link utility for in-copy references.

Styled internal path

Same flex layout without icon when external={false} for /documentation-style paths.

Anatomy

GitHub Underlined external /documentation Learn more

variant

default, md, underline (uses link utility), and accent for case-study CTAs.

external / showIcon

Inferred from http(s) URLs; override for internal paths that share underline styles.

wrap

flex-wrap on the anchor for long labels such as “Book 20 minutes” in the footer.

Guidelines

  • Prefer ExternalLink over manual ArrowUpRight icons on anchors.
  • Use variant md in contact lists; underline in documentation prose beside plain link class.
  • For internal paths with underline only, set external={false} and showIcon={false}.
  • Export externalLinkVariants when a plain anchor needs the same flex styles without an icon.
  • isExternalHref() helps mixed internal/external “Learn more” links in long-form posts.
  • Email mailto links stay plain anchors; they are not ExternalLink.

In practice

GitHub in footer?

Default variant; http URL opens in new tab with icon.

/documentation in prose?

underline, external={false}, showIcon={false}.

Case study CTA?

variant accent with optional class for margin.

Icon inside Button?

Keep composing Button children; do not nest ExternalLink.

Related primitives

Other primitives in the system, in the same order as the documentation sidebar.

ButtonLiveBadgeSeparatorSheetStatusIndicatorTag