Link

문장 속 링크와 단독 링크. 외부 링크는 새 탭 표시.

개요

미리보기

예시 언어동작 줄이기

For the full rules, 모든 버튼 보기 has them all.

href

variant

externalcurrent

children

이렇게 이동에만 쓰고, 상태를 바꾸는 행동은 Button으로 한다. 링크 글자는 도착지를 말한다(“여기” 금지). 랜딩·가입에서는 이메일 가입과 로그인을 링크로 둔다.
이렇게 URL이 바뀌면 링크, 이 화면에서 행동하면 버튼.
이렇게 본문 링크는 밑줄을 둔다. 색만으로 구분하지 않는다.
이렇게 하지 않기 “여기”, “더 보기”처럼 목적지를 말하지 않는 텍스트를 쓰지 않는다.
이렇게 하지 않기 링크 안에 버튼 등 대화형 요소를 넣지 않는다.

이름	타입	기본값	설명
`href`	`string`	`/designsystem/button`	목적지. 필수. 목적지가 없는 행동은 Button variant="quiet"를 쓴다. 내부 경로는 next/link로 렌더한다.
`variant?`	`'inline' \| 'standalone'`	`inline`	inline = 문장 안(2.5.8 예외), standalone = 단독 줄, 누르는 영역 44px.
`external?`	`boolean`	`false`	새 탭. target="_blank" rel="noopener noreferrer", 보이는 표시와 숨김 텍스트 “(새 탭)”.
`current?`	`boolean`	`false`	링크 묶음에서 현재 페이지. aria-current="page".
`children`	`ReactNode`	`모든 버튼 보기`	링크 텍스트. 이것만 읽어도 목적지를 알 수 있어야 한다.
`ref`	—	—	ref는 <a>로 전달된다.
그 밖의 속성	—	—	rel(추가), download, hrefLang, onClick, aria-* 등 네이티브 a 속성은 그대로 전달된다. target은 external로만 정한다. className·style은 받지 않는다.

예시

이렇게 · 이렇게 하지 않기

이렇게 이동에만 쓰고, 상태를 바꾸는 행동은 Button으로 한다. 링크 글자는 도착지를 말한다(“여기” 금지). 랜딩·가입에서는 이메일 가입과 로그인을 링크로 둔다.

이렇게 URL이 바뀌면 링크, 이 화면에서 행동하면 버튼.

이렇게 본문 링크는 밑줄을 둔다. 색만으로 구분하지 않는다.

이렇게 하지 않기 “여기”, “더 보기”처럼 목적지를 말하지 않는 텍스트를 쓰지 않는다.

이렇게 하지 않기 링크 안에 버튼 등 대화형 요소를 넣지 않는다.

토큰과 속성

이름	타입	기본값	설명
`href`	`string`	`/designsystem/button`	목적지. 필수. 목적지가 없는 행동은 Button variant="quiet"를 쓴다. 내부 경로는 next/link로 렌더한다.
`variant?`	`'inline' \| 'standalone'`	`inline`	inline = 문장 안(2.5.8 예외), standalone = 단독 줄, 누르는 영역 44px.
`external?`	`boolean`	`false`	새 탭. target="_blank" rel="noopener noreferrer", 보이는 표시와 숨김 텍스트 “(새 탭)”.
`current?`	`boolean`	`false`	링크 묶음에서 현재 페이지. aria-current="page".
`children`	`ReactNode`	`모든 버튼 보기`	링크 텍스트. 이것만 읽어도 목적지를 알 수 있어야 한다.
`ref`	—	—	ref는 <a>로 전달된다.
그 밖의 속성	—	—	rel(추가), download, hrefLang, onClick, aria-* 등 네이티브 a 속성은 그대로 전달된다. target은 external로만 정한다. className·style은 받지 않는다.