Skip to content

ActionsText link

Text link

A link with an icon. Used for foot-of-section CTAs ('Read the changelog', 'Browse the foundations') and inline references in lists.

Icon + textTrailing only

Demo

Trailing icon only. Leading icons are reserved for navigation chrome.

With icon
Read the full changelogBrowse the foundationsSee the design principles

Implementation

text-link.tsx
import Link from "next/link"
import SiteIcon, type SiteIconProps } from "@/components/site-icon"

interface TextLinkProps {
  href: string
  icon: SiteIconProps["icon"]
  children: React.ReactNode
}

export function TextLink({ href, icon, children }: TextLinkProps) {
  return (
    <Link href={href} className="ds-btn ds-btn--link ds-btn--sm">
      <SiteIcon icon={icon} size="xs" />
      {children}
    </Link>
  )
}

Accessibility

  • The icon is decorative. The link's text is the accessible name.
  • Underline is visible at all times (not on hover only) to make the affordance clear.
  • Color is the system --foreground to ensure 13.74:1 contrast against the warm-neutral background.