Themes
Advanced
Utils
Components

Link

페이지 간 네비게이션을 위한 시맨틱 요소입니다.

View sourceReport an issueView in Playground
<Link href="#">Sign up</Link>

API Reference

이 컴포넌트는 a 요소를 기반으로 하며 common margin props를 지원합니다.

PropTypeDefault
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을 사용하여 특정 색상을 지정합니다.

<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>
PreviousKbd
NextQuote
Edit this page on GitHub.