Link
페이지 이동·액션 트리거용 하이퍼링크 컴포넌트입니다. 본문 안 인라인 링크는 Typography의 typo_link를 사용합니다.
기본
기본 색상은 primary입니다. hover 시 밑줄이 표시됩니다.
이미지 · 아이콘 · 커스텀 요소
children에 이미지·아이콘·컴포넌트를 조합하거나 as로 루트 요소를 변경할 수 있습니다.
색상
공통 color_* 클래스를 조합합니다. 버튼·배지·알림 등 다른 컴포넌트와 동일한 클래스명을 사용합니다.
크기
공통 size_* 클래스로 텍스트 크기를 조절합니다.
스타일
underline · noUnderline · standalone prop으로 밑줄과 터치 영역을 조절합니다.
내비게이션
nav · active prop으로 link_nav · is-active 메뉴·탭 링크를 표현합니다.
블록 · 그룹
block prop · link_group으로 세로 링크 목록을 구성합니다.
아이콘 전용
iconOnly prop으로 link_icon-only 텍스트 없는 링크 버튼을 만듭니다.
아이콘
icon prop·children으로 텍스트 앞·뒤에 아이콘을 배치합니다. 장식용 아이콘은 aria-hidden이 자동 적용됩니다.
새 창 열기
target="_blank"과 rel="noopener noreferrer"를 함께 지정합니다. 스크린 리더용 안내 문구를 링크 텍스트에 포함합니다.
비활성
disabled prop으로 is-disabled · aria-disabled · tabindex=-1을 적용합니다.
문맥 속 사용
알림·카드·폼 등 다른 컴포넌트 안에서 보조 액션 링크로 활용합니다.
API · Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
as | React.ElementType | a | 루트 요소 또는 커스텀 링크 컴포넌트. button 등으로 변경할 수 있습니다 |
color | 'primary' | 'muted' | 'success' | 'warning' | 'danger' | primary | 공통 color_* 클래스 |
size | 'sm' | 'lg' | 'xl' | — | 공통 size_* 클래스 |
underline | boolean | false | 항상 밑줄 (link_underline) |
noUnderline | boolean | false | 밑줄 없음 (link_no-underline) |
standalone | boolean | false | 터치 영역 확대 (link_standalone) |
nav | boolean | false | 내비게이션 링크 스타일 (link_nav) |
block | boolean | false | 블록 링크 (link_block) |
back | boolean | false | 뒤로가기 링크 (link_back) |
iconOnly | boolean | false | 아이콘만 표시 (link_icon-only) |
active | boolean | false | 현재 페이지·활성 상태 (is-active) |
disabled | boolean | false | 비활성 (is-disabled, aria-disabled, tabindex -1) |
label | string | — | 링크 텍스트. children으로 대체 가능 |
href | string | # | 이동 URL |
target | string | — | a target 속성 (예: _blank) |
rel | string | — | a rel 속성 (예: noopener noreferrer) |
ariaLabel | string | — | iconOnly 등 텍스트 없을 때 접근성 라벨 |
ripple | boolean | true | 클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성 |
본문 안 인라인 링크는 Typography의 typo_link를 사용합니다. 이 Link 컴포넌트는 독립 액션·내비게이션 링크용입니다.
API · Children
| Children / Prop | 설명 |
|---|---|
label | 링크 텍스트. children으로 대체 가능 |
children | label 대체 콘텐츠. 텍스트·이미지·아이콘·커스텀 컴포넌트를 함께 넣을 수 있음 |
icon | 텍스트 앞 아이콘 (Vue #icon 슬롯 대응, link_icon 클래스) |
클래스 · 속성
React 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
link | 하이퍼링크 루트 |
link_underline · link_no-underline · link_standalone | 밑줄·터치 영역 |
link_nav · link_back · link_block · link_icon-only | 용도별 변형 |
link_icon | 링크 내 아이콘 |
link_row · link_group · link_group-inline | 링크 묶음 레이아웃 |
is-active · is-disabled | 상태 클래스 |
color_* · size_* | 공통 색상·크기 유틸 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--link-gap | var(--space-xs) | 아이콘·텍스트 간격 |
--link-font-weight | 500 | 링크 두께 |
--link-underline-offset | 2px | 밑줄 오프셋 |
--link-nav-padding-y · --link-nav-padding-x | 0.35rem · 0.5rem | 네비 링크 패딩 |
--link-standalone-padding-y · --link-standalone-padding-x | 0.25rem · 0.15rem | 독립 링크 터치 영역 |
--link-icon-only-size | 2rem | 아이콘만 링크 크기 |