TextLink

한눈에#

본문·문장 속에서 다른 곳으로 이동하는 인라인 텍스트 링크입니다 — 둘러싼 본문의 폰트 크기를 상속하고, external이면 새 탭 + 아이콘 + “(새 창 열림)” 안내가 붙습니다.

기본 링크보조 링크외부 링크(새 창 열림)

• color.link 토큰 쌍
• external 새 탭 + 아이콘
• 본문 폰트 상속
• AA 링크 대비

기본은 color.link 파랑 + medium, hover 시 link-hover + 밑줄 — muted는 낮은 위계 보조 톤

사용 시점#

본문 속에서 다른 곳으로 이동하는 인라인 링크면 TextLink — 행동 트리거나 구조적 내비게이션은 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

TextLink를 직접 조작해 보세요

속성·테마·토큰을 바꾸고 React·Flutter 코드를 확인하는 풀스크린 빌더로 엽니다.

빌더 열기→

플레이그라운드는 넓은 작업 영역이 필요해 웹·태블릿에서 편집할 수 있어요.

변형#

기본 링크보조 링크위즈팩토리(새 창 열림)

• 기본 — color.link 파랑 + medium 굵기. hover 시 link-hover + 밑줄
• muted — 회색 보조 톤. 푸터·메타 정보처럼 낮은 위계에
• external — ExternalLinkIcon(1em 동기) + target="_blank" · rel="noopener noreferrer" 기본값(소비자 오버라이드 가능)

크기#

전용 size prop이 없습니다 — 링크는 둘러싼 본문의 폰트 크기를 상속하고, external 아이콘도 1em으로 따라 커집니다.

상태#

비활성 링크

Hover/Focus는 의사클래스입니다 — :focus-visible 2px primary 링. disabled는 href를 제거해 탭 순서에서도 빠집니다.

Props#

접근성#

• 네이티브 <a> 렌더 — Next 라우팅이 필요하면 next/link의 자식으로 합성합니다
• external 아이콘은 장식(aria-hidden) — 대신 시각 숨김 텍스트 “(새 창 열림)” 이 새 탭 동작을 알립니다(externalLabel로 한국어 기본값 오버라이드)
• disabled는 aria-disabled + href 제거 — 클릭·키보드 활성화 모두 차단
• :focus-visible에 2px primary 아웃라인 링

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).