Semantic element for navigation between pages.
<Link href="#">Sign up</Link>
This component is based on the a element and supports common margin props.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | |
size | Responsive<enum> | |
weight | Responsive<"light" | "regular" | "medium" | "bold"> | |
trim | Responsive<"normal" | "start" | "end" | "both"> | |
truncate | boolean | |
wrap | Responsive<"wrap" | "nowrap" | "pretty" | "balance"> | |
underline | "auto" | "always" | "hover" | "none" | "auto" |
color | enum | |
highContrast | boolean |
Use the size prop to control the size of the link. The prop also provides correct line height and corrective letter spacing—as text size increases, the relative line height and letter spacing decrease.
<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>
Use the weight prop to set the text weight.
<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>
Use the truncate prop to truncate text with an ellipsis when it overflows its container.
<Flex maxWidth="150px">
<Link href="#" truncate>
Sign up to the newsletter
</Link>
</Flex>
Use the color prop to assign a specific 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>
Use the highContrast prop to increase color contrast with the background.
<Flex direction="column">
<Link href="#" color="gray">
Sign up
</Link>
<Link href="#" color="gray" highContrast>
Sign up
</Link>
</Flex>
Use the underline prop to manage the visibility of the underline affordance.