Skip to content
Docs
컴포넌트로 돌아가기

Link

@hua-labs/ui
v1.0.0

외부 링크와 다양한 스타일 변형을 지원하는 링크 컴포넌트입니다.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { Link } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

Props

이름타입기본값설명
href*string-링크 URL
children*React.ReactNode-링크 내용
variant"default" | "primary" | "secondary" | "ghost" | "underline""default"링크 스타일 변형
size"sm" | "md" | "lg""md"링크 크기
externalbooleanfalse새 탭에서 열기 (noopener noreferrer 자동 설정)

코드 예시

기본 사용법tsx
1import { Link } from '@hua-labs/ui';
2 
3<Link href="/about">About Us</Link>
스타일 변형tsx
1<Link href="/docs" variant="primary">Primary Link</Link>
2<Link href="/docs" variant="secondary">Secondary</Link>
3<Link href="/docs" variant="underline">Underlined</Link>
4<Link href="/docs" variant="ghost">Ghost</Link>
외부 링크tsx
1<Link href="https://github.com" external>
2  GitHub <ArrowSquareOut />
3</Link>

접근성

  • •외부 링크: 자동으로 target='_blank'와 rel='noopener noreferrer' 추가
  • •시맨틱 HTML: 네이티브 <a> 요소 사용