LinkButton
실제 앵커로 렌더링되어 버튼처럼 보이는 탐색 컴포넌트로, 여섯 가지 intent와 세 가지 appearance, 세 가지 크기를 제공해요.
핵심 속성
| 축 | 값 | 기본값 | 용도 |
|---|---|---|---|
intent | neutral, primary, info, success, warning, danger | neutral | 목적지의 의미나 결과를 전달해요. |
appearance | solid, outline, ghost | solid | intent를 바꾸지 않고 시각적 강조를 조정해요. |
uiSize | md, lg | md | 주변 컨트롤 크기에 맞춰요. |
disabled | boolean | false | 목적지를 제거하고 탐색을 막아요. |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/link-button.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRLinkButton } from '@tinyrack/ui/components/link-button';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
버튼처럼 보이는 탐색 고유 링크
탐색을 버튼처럼 보이게 하고 싶을 때 TRLinkButton을 사용하세요. role=link인 실제 앵커로 렌더링되어 네이티브 링크 동작을 유지해요.
예시
Solid intent 고유 링크
가장 강한 강조가 필요한 목적지에는 solid 링크 버튼을 사용하세요.
Outline intent 고유 링크
눈에 띄되 강조를 낮춰야 하는 목적지에는 outline 링크 버튼을 사용하세요.
Ghost intent 고유 링크
깔끔한 표면에서 강조가 낮은 탐색에는 ghost 링크 버튼을 사용하세요.
크기 고유 링크
목적지의 중요도가 아니라 주변 컨트롤에 맞는 크기를 선택하세요.
상태와 목적지 고유 링크
disabled는 목적지를 제거하고 탐색을 막아요. 외부 목적지는 새 탐색 맥락이 열림을 보이는 텍스트로 알려요.
API
버튼처럼 보이는 탐색에는 TRLinkButton을, 명령에는 TRButton을 사용하세요. 실제 앵커를 role="link"로 렌더링하므로 Enter로 실행되고 Space는 네이티브 앵커처럼 화면을 스크롤하며, 네이티브 href, target, rel, download가 모두 동작해요. 비활성 링크 버튼은 aria-disabled를 노출하고 href와 탭 순서를 제거하며 포인터와 키보드 실행을 막아요. 외부 목적지는 새 탐색 맥락이 열림을 보이는 텍스트로 알리고 target="_blank"와 적절한 rel을 함께 사용하세요.
| Prop | 타입 / 기본값 | 용도 |
|---|---|---|
intent | neutral | primary | info | success | warning | danger / neutral | 의미와 색상 역할을 선택해요. |
appearance | solid | outline | ghost / solid | intent를 바꾸지 않고 시각적 강조를 선택해요. |
uiSize | md | lg / md | 컨트롤 크기를 선택해요. |
disabled | boolean / false | 목적지를 제거하고 탐색을 막아요. |
href | 네이티브 앵커 href | 목적지를 지정하며 disabled일 때 생략해요. |
render | Base UI 렌더 요소 또는 콜백 | 앵커를 중첩하지 않고 React Router 등의 링크를 조합해요. |
| 네이티브 prop | 앵커 속성, 이벤트, className, style, ref | 외부 링크와 다운로드 속성, 핸들러, 스타일, React 19 ref를 전달해요. |
TRLinkButton은 TRButton의 스타일 계약(data-appearance, data-intent,
data-ui-size가 붙은 tr-btn 클래스)을 그대로 사용하므로, 링크 의미를
유지하면서 버튼과 시각적으로 동일해요.