Text Link
텍스트와 화살표로 다음 목적지를 알립니다.
- 성숙도
- 안정
- 소스 경로
components/ui/text-link.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/react
실제 미리보기
사용할 때
사용 기준
구간 끝이나 목록 행에서 다음 페이지를 가볍게 안내할 때 씁니다.
사용하지 않을 때
주요 제출 동작이나 아이콘만 있는 컨트롤에는 쓰지 않습니다.
변형과 상태
default고정 예시실제 링크의 목적지 텍스트, 밑줄, 장식 화살표를 함께 확인합니다.
hover직접 조작실제 링크에 포인터를 올려 Blue 전환과 화살표 이동을 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
focus-visible직접 조작Tab으로 실제 링크에 초점을 옮겨 외부 focus outline을 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
visited직접 조작실제 링크를 연 뒤 돌아와 deep blue 방문 상태가 목적지 의미를 유지하는지 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
접근성
링크 텍스트만 읽어도 목적지를 알 수 있어야 하며 화살표는 장식으로 처리합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
href | string | 예 | 이동할 내부 또는 외부 주소입니다. |
children | ReactNode | 예 | 목적지를 설명하는 텍스트입니다. |
사용 예시
지원 importimport { TextLink } from "@/components/ui/text-link"
<TextLink href="/design/components">Components</TextLink>