링크

페이지 간 이동을 위한 시맨틱한 요소예요. a 요소 기반으로 만들어졌어요.

출처: 문서

본문

페이지 간 이동을 위한 시맨틱한 요소예요.

<Link href="#">Sign up</Link>

API Reference

이 컴포넌트는 a 요소를 기반으로 하며 공통 margin props를 지원해요.

Prop Type Default
asChild boolean No default value
size Responsive<enum> No default value
weight Responsive<"light" | "regular" | "medium" | "bold"> No default value
trim Responsive<"normal" | "start" | "end" | "both"> No default value
truncate boolean No default value
wrap Responsive<"wrap" | "nowrap" | "pretty" | "balance"> No default value
underline "auto" | "always" | "hover" | "none" "auto"
color enum No default value
highContrast boolean No default value

예제 (Examples)

Size

size prop으로 링크의 크기를 제어해요. 이 prop은 올바른 줄 높이와 보정된 자간도 함께 제공해요. 텍스트 크기가 커질수록 상대적 줄 높이와 자간은 줄어들어요.

<Flex direction="column" gap="3">
  <Link href="#" size="1">
    Sign up
  </Link>

  <Link href="#" size="2">
    Sign up
  </Link>

  <Link href="#" size="3">
    Sign up
  </Link>

  <Link href="#" size="4">
    Sign up
  </Link>

  <Link href="#" size="5">
    Sign up
  </Link>

  <Link href="#" size="6">
    Sign up
  </Link>

  <Link href="#" size="7">
    Sign up
  </Link>

  <Link href="#" size="8">
    Sign up
  </Link>

  <Link href="#" size="9">
    Sign up
  </Link>
</Flex>

Weight

weight prop으로 텍스트 굵기를 설정해요.

<Flex direction="column">
  <Link href="#" weight="regular">
    Sign up
  </Link>

  <Link href="#" weight="medium">
    Sign up
  </Link>

  <Link href="#" weight="bold">
    Sign up
  </Link>
</Flex>

Truncate

truncate prop으로 텍스트가 컨테이너를 넘칠 때 생략 부호(...)로 잘라내요.

<Flex maxWidth="150px">
  <Link href="#" truncate>
    Sign up to the newsletter
  </Link>
</Flex>

Color

color prop으로 특정 color를 지정해요.

<Flex direction="column">
  <Link href="#" color="indigo">
    Sign up
  </Link>

  <Link href="#" color="cyan">
    Sign up
  </Link>

  <Link href="#" color="orange">
    Sign up
  </Link>

  <Link href="#" color="crimson">
    Sign up
  </Link>
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높여요.

<Flex direction="column">
  <Link href="#" color="gray">
    Sign up
  </Link>

  <Link href="#" color="gray" highContrast>
    Sign up
  </Link>
</Flex>

Underline

underline prop으로 밑줄 표시 여부를 관리해요.

<Flex direction="column">
  <Link href="#" underline="hover">
    Sign up
  </Link>

  <Link href="#" underline="always">
    Sign up
  </Link>
</Flex>

더 알아보기 (Learn more)