Link

Link

페이지 이동·액션 트리거용 하이퍼링크 컴포넌트입니다. 본문 안 인라인 링크는 Typography의 typo_link를 사용합니다.

기본

기본 색상은 primary입니다. hover 시 밑줄이 표시됩니다.

이미지 · 아이콘 · 커스텀 요소

기본 슬롯에 이미지·아이콘·컴포넌트를 조합하거나 as로 루트 요소를 변경할 수 있습니다.

색상

공통 color_* 클래스를 조합합니다. 버튼·배지·알림 등 다른 컴포넌트와 동일한 클래스명을 사용합니다.

크기

공통 size_* 클래스로 텍스트 크기를 조절합니다.

스타일

link_underline · link_no-underline · link_standalone으로 밑줄과 터치 영역을 조절합니다.

link_nav · is-active로 메뉴·탭 링크를 표현합니다.

블록 · 그룹

link_block · link_group으로 세로 링크 목록을 구성합니다.

아이콘 전용

link_icon-only으로 텍스트 없는 링크 버튼을 만듭니다.

아이콘

link_icon으로 텍스트 앞·뒤에 아이콘을 배치합니다. 장식용 아이콘은 aria-hidden="true"를 지정합니다.

새 창 열기

target="_blank"과 rel="noopener noreferrer"를 함께 지정합니다. 스크린 리더용 안내 문구를 링크 텍스트에 포함합니다.

비활성

aria-disabled="true"와 tabindex="-1"로 비활성 링크를 표현합니다. 클릭 불가 시 href를 제거하거나 span으로 대체할 수 있습니다.

문맥 속 사용

알림·카드·폼 등 다른 컴포넌트 안에서 보조 액션 링크로 활용합니다.

계정이 없으신가요? 회원가입

API · Props

Prop타입기본값설명
asstring | Componenta루트 요소 또는 커스텀 링크 컴포넌트. button 등으로 변경할 수 있습니다
color'primary' | 'muted' | 'success' | 'warning' | 'danger'primary공통 color_* 클래스
size'sm' | 'lg' | 'xl'공통 size_* 클래스
underlinebooleanfalse항상 밑줄 (link_underline)
no-underlinebooleanfalse밑줄 없음 (link_no-underline)
standalonebooleanfalse터치 영역 확대 (link_standalone)
navbooleanfalse내비게이션 링크 스타일 (link_nav)
blockbooleanfalse블록 링크 (link_block)
backbooleanfalse뒤로가기 링크 (link_back)
icon-onlybooleanfalse아이콘만 표시 (link_icon-only)
activebooleanfalse현재 페이지·활성 상태 (is-active)
disabledbooleanfalse비활성 (is-disabled, aria-disabled, tabindex -1)
labelstring링크 텍스트. default 슬롯으로 대체 가능
hrefstring#이동 URL
targetstringa target 속성 (예: _blank)
relstringa rel 속성 (예: noopener noreferrer)
aria-labelstringicon-only 등 텍스트 없을 때 접근성 라벨
ripplebooleantrue클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성

본문 안 인라인 링크는 Typography의 typo_link를 사용합니다. 이 Link 컴포넌트는 독립 액션·내비게이션 링크용입니다.

API · Slots

슬롯설명
defaultlabel 대체 콘텐츠. 텍스트·이미지·아이콘·커스텀 컴포넌트를 함께 넣을 수 있음
icon텍스트 앞 아이콘 (link_icon)

클래스 · 속성

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스설명
link하이퍼링크 루트
link_underline · link_no-underline · link_standalone밑줄·터치 영역
link_nav · link_back · link_block · link_icon-only용도별 변형
link_icon링크 내 아이콘
link_media링크 내 이미지·미디어
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-gapvar(--space-xs)아이콘·텍스트 간격
--link-font-weight500링크 두께
--link-underline-offset2px밑줄 오프셋
--link-nav-padding-y · --link-nav-padding-x0.35rem · 0.5rem네비 링크 패딩
--link-standalone-padding-y · --link-standalone-padding-x0.25rem · 0.15rem독립 링크 터치 영역
--link-icon-only-size2rem아이콘만 링크 크기