Radix2Solid

Link

Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

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

API Reference

This component is based on the a element and supports common margin props.

PropTypeDefault
asChildboolean—
sizeResponsive<enum>—
weightResponsive<"light" | "regular" | "medium" | "bold">—
trimResponsive<"normal" | "start" | "end" | "both">—
truncateboolean—
wrapResponsive<"wrap" | "nowrap" | "pretty" | "balance">—
underline"auto" | "always" | "hover" | "none""auto"
colorenum""
highContrastboolean—

Examples

Size

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.

Sign upSign upSign upSign upSign upSign upSign upSign upSign up
<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

Use the weight prop to set the text weight.

Sign upSign upSign up
<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

Use the truncate prop to truncate text with an ellipsis when it overflows its container.

Sign up to the newsletter
<Flex maxWidth="150px">

	<Link href="#" truncate>

		Sign up to the newsletter

	</Link>

</Flex>

Color

Use the color prop to assign a specific color.

Sign upSign upSign upSign up
<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

Use the highContrast prop to increase color contrast with the background.

Sign upSign up
<Flex direction="column">

	<Link href="#" color="gray">

		Sign up

	</Link>

	<Link href="#" color="gray" highContrast>

		Sign up

	</Link>

</Flex>

Underline

Use the underline prop to manage the visibility of the underline affordance.

Sign upSign up
<Flex direction="column">

	<Link href="#" underline="hover">

		Sign up

	</Link>

	<Link href="#" underline="always">

		Sign up

	</Link>

</Flex>