Link
Links are accessible elements used primarily for navigation. Use the href
prop to specify the location for the link to navigate to.
You can also provide local links to other pages in your project without writing the full url.
The link
component can be used to wrap other components to make them link to other pages.
You can also create anchors to link to specific parts of a page using the id
prop.
To reference an anchor, you can use the href
prop of the link
component. The href
should be in the format of the page you want to link to followed by a # and the id of the anchor.
Style
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.
Weight
Use the weight
prop to set the text weight.
Trim
Use the trim
prop to trim the leading space at the start, end, or both sides of the rendered text.
Underline
Use the underline
prop to manage the visibility of the underline affordance. It defaults to auto
.
Color
Use the color_scheme
prop to assign a specific color, ignoring the global theme.
High Contrast
Use the high_contrast
prop to increase color contrast with the background.
API Reference
rx.link
A semantic element for navigation between pages.