Made by ScaleRadix Homepage
Scale UI Radix
DocumentationDocumentationComponents CatalogComponents CatalogPlayroomPlayroom
Radix PrimitivesFont Awesome Icons
Components

Link

Semantic element for navigation between pages.

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

API Reference

This component is based on the a element and supports 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

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. Currently, we recommend using only sizes 1,2 and 3 following the ScaleUI Radix design system.

<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>

</Flex>

Weight

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>

</Flex>

Truncate

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>

Underline

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

<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.