Link
다른 페이지나 문서로 이동할 때 써요. 동작을 실행하면 Button을 써요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
DESIGN.md 보기default
DESIGN.md 보기(새 탭에서 열림)external
사용법
- 코발트를 쓰지 않아요text/default + 밑줄(offset 2px)이에요. 강조는 한 곳에만 쓰는 원칙 때문이에요.
- hover는 text/muted포커스 링은 공통 규칙(2px, offset 2px)이에요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| href | 이동할 주소 | — |
| external | 새 탭으로 열고 external-link 아이콘을 붙여요 | false |
| render | 다른 링크 컴포넌트로 렌더링 (예: Next.js Link) | — |
코드
tsx
<Link href="/docs">DESIGN.md 보기</Link>
<Link href="https://base-ui.com" external>Base UI 문서</Link>
<Link render={<NextLink href="/docs" />}>문서</Link>