Button Link
Button과 같은 모양을 쓰되 native anchor로 다른 주소에 이동합니다.
- 성숙도
- 안정
- 소스 경로
components/ui/button-link.tsx- 소스
- 소스
실제 미리보기
사용할 때
사용 기준
강한 CTA가 페이지나 주소 이동일 때만 씁니다.
사용하지 않을 때
저장, 제출, 모달 열기처럼 현재 화면에서 실행되는 동작에는 Button을 씁니다.
변형과 상태
primary고정 예시주요 이동 목적지를 파란 면으로 표시합니다.
secondary고정 예시보조 이동은 Paper 면과 1px 선으로 표시합니다.
outline고정 예시채운 면 없이 Ink 경계로 이동 동작을 구분합니다.
inverse고정 예시어두운 면에서도 링크 목적지가 선명한지 확인합니다.
ghost고정 예시낮은 위계의 이동에도 링크 초점 표시를 유지합니다.
icon고정 예시아이콘 링크에는 목적지를 설명하는 aria-label이 필요합니다.
접근성
Button으로 대체하지 말고 native anchor 의미와 목적지가 드러나는 이름을 유지합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
href | string | 예 | 이동할 주소입니다. |
variant | "primary" | "secondary" | "outline" | "inverse" | "danger" | "ghost" | 아니요 | 링크의 시각 위계를 정합니다. |
size | "compact" | "default" | "icon" | 아니요 | 컨트롤 밀도를 정합니다. |
children | ReactNode | 예 | 목적지를 설명하는 이름 또는 아이콘입니다. |
사용 예시
지원 importimport { ButtonLink } from "@/components/ui/button-link"
<ButtonLink href="/design">Design guide</ButtonLink>