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.
ExpandCollapse
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.
sizeweightcolor_schemehigh_contrastProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
download | Union[str, bool] | Specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink. |
href | str | Specifies the URL of the page the link goes to. |
href_lang | str | Specifies the language of the linked document. |
media | str | Specifies what media/device the linked document is optimized for. |
ping | str | Specifies which referrer is sent when fetching the resource. |
referrer_policy | """no-referrer""no-referrer-when-downgrade""origin""origin-when-cross-origin""same-origin""strict-origin""strict-origin-when-cross-origin""unsafe-url" | Specifies the relationship between the current document and the linked document. |
rel | str | Specifies the relationship between the linked document and the current document. |
target | "_self""_blank""_parent""_top" | Specifies where to open the linked document. |
as_child | bool | Change the default rendered element for the one passed as a child, merging their props and behavior. |
size | "1""2""3""4""5""6""7""8""9" | Text size: "1" - "9". |
weight | "light""regular""medium""bold" | Thickness of text: "light" | "regular" | "medium" | "bold". |
trim | "normal""start""end""both" | Removes the leading trim space: "normal" | "start" | "end" | "both". |
underline | "auto""hover""always""none" | Sets the visibility of the underline affordance: "auto" | "hover" | "always" | "none". |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | Overrides the accent color inherited from the Theme. |
high_contrast | bool | Whether to render the text with higher contrast color. |
is_external | bool | If True, the link will open in a new tab. |