CoreLink

Usage

기본 사용법

import { CoreLink } from '@featuring-corp/components';

<CoreLink href="https://example.com" text="링크" />

크기 설정

import { CoreLink } from '@featuring-corp/components';

<CoreLink href="https://example.com" text="링크" size="sm" />
<CoreLink href="https://example.com" text="링크" size="md" />

Trailing Element 추가

import { CoreLink } from '@featuring-corp/components';
import { IconLaunchOutline } from '@featuring-corp/icons';

<CoreLink 
  href="https://example.com" 
  text="링크" 
  trailingElement={<IconLaunchOutline />} 
/>

Underline 표시

import { CoreLink } from '@featuring-corp/components';

<CoreLink 
  href="https://example.com" 
  text="링크" 
  isUnderline 
/>

모든 옵션 조합

import { CoreLink } from '@featuring-corp/components';
import { IconLaunchOutline } from '@featuring-corp/icons';

<CoreLink 
  href="https://example.com" 
  text="링크" 
  size="md"
  isUnderline
  trailingElement={<IconLaunchOutline />}
  target="_blank"
/>

외부 링크

import { CoreLink } from '@featuring-corp/components';
import { IconLaunchOutline } from '@featuring-corp/icons';

<CoreLink 
  href="https://featuring-front-core.vercel.app" 
  text="링크" 
  trailingElement={<IconLaunchOutline />}
  target="_blank"
  rel="noopener noreferrer"
/>

Props

ComponentPropsWithoutRef<'a'> 타입을 확장한 컴포넌트입니다.

Prop

Type

CoreLinkSize

Prop

Type

스타일

기본 스타일 속성

display: inline-flex
gap: spacing-100 (4px)
text-decoration-line: none (기본값) 또는 underline (isUnderline일 때)
text-underline-position: from-font (isUnderline일 때)

Size Variants

Size	Typography
`sm`	`body[1]`
`md`	`body[2]`

Color States

Default/Link: blue[60]
Hover: blue[70]
Active: blue[80]
Focus: blue[70] (outline: none)
Visited: purple[80]
Disabled: text[5]

Icon Size

width: 16px
height: 16px

On this page