Link
텍스트 형태의 링크 컴포넌트입니다. 본문 흐름 중간, 푸터, 카드 등 별도의 컨테이너 없이 액션을 제공할 때 사용합니다.
외부 URL로 이동하는 경우 오른쪽에 external-link 아이콘을 함께 표시합니다.
Figma 컴포넌트: Base components → Link
Color
브랜드 컬러 / 그레이 / Destructive 3가지 컬러를 제공합니다.
| Color | 용도 |
|---|---|
brand (color="brand") | 기본 링크. 브랜드 보라(#5200b0). 본문 중간 강조 |
gray (color="gray") | 톤을 죽인 보조 링크. 카드·테이블 내부 등 시각적 무게가 낮아야 할 때 |
destructive (destructive) | 삭제·경고 관련 링크. 항상 밑줄 표시(#d92d20) |
Size
4가지 사이즈를 지원합니다. 본문 사이즈에 맞춰 선택합니다.
| Size | Font | Line height | Token |
|---|---|---|---|
| sm | 12px | 18px | text-xs |
| md (기본값) | 14px | 20px | text-sm |
| lg | 16px | 24px | text-md |
| xl | 18px | 28px | text-lg |
States
각 컬러별로 4가지 상태를 가집니다: Default Hover Focused Disabled.
Link color (brand)
Link gray
Link destructive
Icon 없는 경우
showIcon={false}로 설정하면 external-link 아이콘을 숨길 수 있습니다. 내부 페이지 네비게이션 링크에 적합합니다.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | brand | gray | brand | 링크 컬러. Destructive를 사용하려면 `destructive` prop을 true로 설정 |
destructive | boolean | false | true이면 color를 무시하고 destructive(빨간색 + 밑줄) 스타일 적용 |
size | sm | md | lg | xl | md | 폰트 크기 |
state | default | hover | focused | disabled | default | 상태 (문서 시각화용. 실제 사용 시 CSS :hover/:focus가 자동 적용) |
showIcon | boolean | true | 오른쪽 external-link 아이콘 표시 여부 |
href | string | '#' | 링크 목적지 URL |
children | ReactNode | 'Click to Download' | 링크 레이블 |
Figma Variants
Link
| Property | Values |
|---|---|
| Size | sm md lg xl |
| Color | Link color Link gray |
| State | Default Hover Focused Disabled |
Link/destructive
| Property | Values |
|---|---|
| Size | sm md lg xl |
| State | Default Hover Focused Disabled |