TextLink
본문 속 텍스트 링크 — color.link 토큰 쌍 소비. external이면 ExternalLinkIcon과 새 탭 기본값, 보조기술에는 "(새 창 열림)"을 알립니다.
마지막 업데이트 2026-06-11
한눈에#
본문·문장 속에서 다른 곳으로 이동하는 인라인 텍스트 링크입니다 — 둘러싼 본문의 폰트 크기를 상속하고, external이면 새 탭 + 아이콘 + "(새 창 열림)" 안내가 붙습니다.
- color.link 토큰 쌍
- external 새 탭 + 아이콘
- 본문 폰트 상속
- AA 링크 대비
기본은 color.link 파랑 + medium, hover 시 link-hover + 밑줄 — muted는 낮은 위계 보조 톤
사용 시점#
본문 속에서 다른 곳으로 이동하는 인라인 링크면 TextLink — 행동 트리거나 구조적 내비게이션은 다른 컴포넌트입니다.
플레이그라운드#
컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.
import { TextLink } from '@wds/ui-web';
<TextLink href="#">문서 보기</TextLink>변형#
- 기본 —
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#
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
muted | boolean | false | 회색 보조 톤 — hover 시 진해짐 |
disabled | boolean | false | href 제거(포커스 불가) + aria-disabled |
external | boolean | false | ExternalLinkIcon 표시 + target/rel 새 탭 기본값 |
externalLabel | string | '(새 창 열림)' | 외부 링크 보조기술 안내 문구 오버라이드 |
…rest | AnchorHTMLAttributes | — | href · target · rel 등 네이티브 속성 전달 |
접근성#
- 네이티브
<a>렌더 — Next 라우팅이 필요하면next/link의 자식으로 합성합니다 - external 아이콘은 장식(
aria-hidden) — 대신 시각 숨김 텍스트 "(새 창 열림)" 이 새 탭 동작을 알립니다(externalLabel로 한국어 기본값 오버라이드) disabled는aria-disabled+ href 제거 — 클릭·키보드 활성화 모두 차단:focus-visible에 2px primary 아웃라인 링
토큰#
component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).
| 속성 | 토큰 |
|---|---|
| 기본 잉크 | color.link → hover color.link-hover |
| muted | color.text-muted → hover color.text |
| disabled | color.text-placeholder |
| 굵기 | font.weight-medium (muted는 regular) |
| 포커스 링 | color.primary 2px 아웃라인 + radius.sm |
| 아이콘 간격 | space.1 |
| 모션 | duration.fast + ease.standard (color 전이) |