Link
네이티브 앵커 기능을 유지하면서 의미 있는 색상과 밑줄 동작을 제공하는 탐색 컴포넌트예요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
variant | default, muted, danger | default |
underline | always, hover, none | hover |
disabled | pointer 및 keyboard 탐색 차단 | false |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/link.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRLink } from '@tinyrack/ui/components/link';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
현재 목적지 고유 링크
일반적인 탐색에는 네이티브 링크를 사용하고 현재 목적지는 aria-current로 표시해요.
예시
클라이언트 라우터 조합 고유 링크
render로 라우터 링크를 조합하면 anchor를 중첩하지 않고 TRLink의 동작과 스타일을 적용할 수 있어요.
의미별 variant 고유 링크
일반 탐색에는 default, 보조 링크에는 muted, 파괴적인 결과로 이동할 때는 danger를 사용하세요.
밑줄 동작 고유 링크
대부분은 기본 hover 밑줄을 사용하고, 탐색 가능성을 계속 보여야 할 때는 always를 사용하세요. 문맥만으로 링크가 분명할 때만 none을 사용하세요.
내부·외부·다운로드 목적지 고유 링크
외부 링크는 보이는 텍스트로 새 탐색 맥락이 열림을 알려요. 다운로드는 네이티브 앵커 기능을 그대로 사용해요.
API
탐색에는 TRLink, 명령에는 TRButton을 사용하세요. 활성 링크는 Enter로 실행되며 Space는 네이티브 앵커처럼 화면을 스크롤해요. 비활성 링크는 aria-disabled를 노출하고 네이티브 목적지와 탭 순서를 제거하며 포인터, 키보드, 프로그래밍 방식의 실행을 막아요. 외부 링크가 새 탐색 맥락을 열면 보이는 텍스트로 알리고 target="_blank"와 적절한 rel을 함께 사용하세요.
| Prop | 타입 / 기본값 | 용도 |
|---|---|---|
href | 네이티브 앵커 href | 목적지를 지정하며 disabled일 때 생략해요. |
variant | default | muted | danger / default | 의미에 맞는 텍스트 색상을 선택해요. |
underline | always | hover | none / hover | 밑줄 표시 방식을 선택해요. |
disabled | boolean / false | 탐색을 막고 순차 포커스에서 제거해요. |
render | Base UI 렌더 요소 또는 콜백 | 앵커를 중첩하지 않고 React Router 등의 링크를 조합해요. |
| 네이티브 prop | 앵커 속성, 이벤트, className, style, ref | 현재 상태, 외부 링크와 다운로드 속성, 핸들러, 스타일, React 19 ref를 전달해요. |
Style tokens
--tr-link-color, --tr-link-font-weight, --tr-link-decoration-thickness, --tr-link-underline-offset, --tr-link-hover-opacity, --tr-link-disabled-opacity, --tr-link-radius, --tr-link-focus-color, --tr-link-focus-width, --tr-link-focus-offset, --tr-link-duration으로 Tinyrack 대체 값을 유지하면서 컴포넌트를 조정할 수 있어요.