Link Links allow users to navigate to a different location.
They can be presented inline inside a paragraph or as standalone text.
< Link >
< a href = "https://www.imdb.com/title/tt6348138/" target = "_blank" >
The missing link.
< / a >
< / Link > < Link >
< a
href = "https://www.imdb.com/title/tt6348138/"
target = "_blank" >
The missing link.
< / a >
< / Link > < Link >
< a
href = "https://www.imdb.com/title/tt6348138/"
target = "_blank" >
The missing link.
< / a >
< / Link >
Links accept content as children.
If the child is a native anchor element, or a link component used with a client side router, the Link component will add spectrum styles and event handlers to that element.
Actual navigation will be handled by the wrapped element.
< Link > < a href = "https://www.adobe.com" target = "_blank" > Adobe.com< / a > < / Link > < Link >
< a href = "https://www.adobe.com" target = "_blank" >
Adobe.com
< / a >
< / Link > < Link >
< a
href = "https://www.adobe.com"
target = "_blank" >
Adobe.com
< / a >
< / Link >
To use in React Router
import { Link } from '@react-spectrum/link' ;
import { Link as RouterLink } from 'react-router-dom' ;
< Link > < RouterLink to = "/next-page" > Next Page< / RouterLink > < / Link > import { Link } from '@react-spectrum/link' ;
import { Link as RouterLink } from 'react-router-dom' ;
< Link >
< RouterLink to = "/next-page" > Next Page< / RouterLink >
< / Link > import { Link } from '@react-spectrum/link' ;
import { Link as RouterLink } from 'react-router-dom' ;
< Link >
< RouterLink to = "/next-page" >
Next Page
< / RouterLink >
< / Link > If the content is plain text, it will be styled and exposed to assistive technologies as a link.
Events will need to be handled in JavaScript with the onPress prop.
Note: this will not behave like a native link. Browser features like context menus and open in new tab will not apply.
< Link onPress = { ( ) => alert ( 'pressed!' ) } > A label< / Link > < Link onPress = { ( ) => alert ( 'pressed!' ) } > A label< / Link > < Link
onPress = { ( ) =>
alert ( 'pressed!' )
} >
A label
< / Link >
In order to internationalize a link, a localized string should be passed to the children prop.
For string-typed children, the link component will expose the accessible role to assistive technology as a "link".
< Link onPress = { e => alert ( `clicked "${ e. target . textContent } ) } >
I forgot my password
< / Link > < Link
onPress = { ( e) =>
alert ( `clicked "${ e. target . textContent } )
} >
I forgot my password
< / Link > < Link
onPress = { ( e) =>
alert (
`clicked "${ e. target . textContent }
)
} >
I forgot my password
< / Link >
For other children, use an element of semantic meaning, or use a role where appropriate.
Be mindful of what the experience is for users navigating with screen readers. Make sure to give enough context within the link about where the link will take the user.
Name Type Default Description children ReactNode — The content to display in the link. variant 'primary'
| 'secondary'
| 'overBackground' 'primary' The visual style of the link. isQuiet boolean — Whether the link should be displayed with a quiet style.
Name Type Default Description onPress (
( e : PressEvent
) ) => void — Handler that is called when the press is released over the target. onPressStart (
( e : PressEvent
) ) => void — Handler that is called when a press interaction starts. onPressEnd (
( e : PressEvent
) ) => void — Handler that is called when a press interaction ends, either
over the target or when the pointer leaves the target. onPressChange (
( isPressed : boolean
) ) => void — Handler that is called when the press state changes. onPressUp (
( e : PressEvent
) ) => void — Handler that is called when a press is released over the target, regardless of
whether it started on the target or not.
Name Type Default Description flex string
| number
| boolean — When used in a flex layout, specifies how the element will grow or shrink to fit the space available. See MDN . flexGrow number — When used in a flex layout, specifies how the element will grow to fit the space available. See MDN . flexShrink number — When used in a flex layout, specifies how the element will shrink to fit the space available. See MDN . flexBasis number | string — When used in a flex layout, specifies the initial main size of the element. See MDN . alignSelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'center'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'stretch' — Overrides the alignItems property of a flex or grid container. See MDN . justifySelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' — Specifies how the element is justified inside a flex or grid container. See MDN . order number — The layout order for the element within a flex or grid container. See MDN . gridArea string — When used in a grid layout, specifies the named grid area that the element should be placed in within the grid. See MDN . gridColumn string — When used in a grid layout, specifies the column the element should be placed in within the grid. See MDN . gridRow string — When used in a grid layout, specifies the row the element should be placed in within the grid. See MDN . gridColumnStart string — When used in a grid layout, specifies the starting column to span within the grid. See MDN . gridColumnEnd string — When used in a grid layout, specifies the ending column to span within the grid. See MDN . gridRowStart string — When used in a grid layout, specifies the starting row to span within the grid. See MDN . gridRowEnd string — When used in a grid layout, specifies the ending row to span within the grid. See MDN .
Name Type Default Description margin DimensionValue — The margin for all four sides of the element. See MDN . marginTop DimensionValue — The margin for the top side of the element. See MDN . marginBottom DimensionValue — The margin for the bottom side of the element. See MDN . marginStart DimensionValue — The margin for the logical start side of the element, depending on layout direction. See MDN . marginEnd DimensionValue — The margin for the logical end side of an element, depending on layout direction. See MDN . marginX DimensionValue — The margin for both the left and right sides of the element. See MDN . marginY DimensionValue — The margin for both the top and bottom sides of the element. See MDN .
Name Type Default Description position 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' — Specifies how the element is positioned. See MDN . top DimensionValue — The top position for the element. See MDN . bottom DimensionValue — The bottom position for the element. See MDN . left DimensionValue — The left position for the element. See MDN . Consider using start instead for RTL support. right DimensionValue — The right position for the element. See MDN . Consider using start instead for RTL support. start DimensionValue — The logical start position for the element, depending on layout direction. See MDN . end DimensionValue — The logical end position for the element, depending on layout direction. See MDN . zIndex number — The stacking order for the element. See MDN . isHidden boolean — Hides the element.
Name Type Default Description id string — The element's unique identifier. tabIndex number — Indicates whether an element is focusable, allows or prevents them from being sequentially focusable,
and determines their relative ordering for sequential focus navigation. aria-label string — Defines a string value that labels the current element. aria-labelledby string — Identifies the element (or elements) that labels the current element. aria-describedby string — Identifies the element (or elements) that describes the object. aria-details string — Identifies the element (or elements) that provide a detailed, extended description for the object.
Name Type Default Description UNSAFE_className string — Sets the CSS className for the element. Only use as a last resort . Use style props instead. UNSAFE_style CSSProperties — Sets inline style for the element. Only use as a last resort . Use style props instead.
View Guidelines
< p >
Would you like to < Link variant = "primary" > learn more< / Link > about this fine
component?
< / p > < p >
Would you like to{ ' ' }
< Link variant = "primary" > learn more< / Link > about this
fine component?
< / p > < p >
Would you like to{ ' ' }
< Link variant = "primary" >
learn more
< / Link > { ' ' }
about this fine
component?
< / p >
< p >
Would you like to < Link variant = "secondary" > learn more< / Link > about this
fine component?
< / p > < p >
Would you like to{ ' ' }
< Link variant = "secondary" > learn more< / Link > about this
fine component?
< / p > < p >
Would you like to{ ' ' }
< Link variant = "secondary" >
learn more
< / Link > { ' ' }
about this fine
component?
< / p >
< View backgroundColor = "positive" padding = "size-300" >
< Link variant = "overBackground" > Learn more here!< / Link >
< / View > < View backgroundColor = "positive" padding = "size-300" >
< Link variant = "overBackground" > Learn more here!< / Link >
< / View > < View
backgroundColor = "positive"
padding = "size-300" >
< Link variant = "overBackground" >
Learn more here!
< / Link >
< / View >
< p >
Would you like to < Link isQuiet > learn more< / Link > about this fine component?
< / p > < p >
Would you like to < Link isQuiet > learn more< / Link > about
this fine component?
< / p > < p >
Would you like to{ ' ' }
< Link isQuiet >
learn more
< / Link > { ' ' }
about this fine
component?
< / p >
Name Type Description type 'pressstart'
| 'pressend'
| 'pressup'
| 'press' The type of press event being fired. pointerType PointerType The pointer type that triggered the press event. target HTMLElement The target element of the press event. shiftKey boolean Whether the shift keyboard modifier was held during the press event. ctrlKey boolean Whether the ctrl keyboard modifier was held during the press event. metaKey boolean Whether the meta keyboard modifier was held during the press event.
'mouse'
| 'pen'
| 'touch'
| 'keyboard'
| 'virtual' See the Styling docs for a visualization of these values.
'size-0'
| 'size-10'
| 'size-25'
| 'size-40'
| 'size-50'
| 'size-65'
| 'size-75'
| 'size-85'
| 'size-100'
| 'size-115'
| 'size-125'
| 'size-130'
| 'size-150'
| 'size-160'
| 'size-175'
| 'size-200'
| 'size-225'
| 'size-250'
| 'size-300'
| 'size-350'
| 'size-400'
| 'size-450'
| 'size-500'
| 'size-550'
| 'size-600'
| 'size-675'
| 'size-700'
| 'size-800'
| 'size-900'
| 'size-1000'
| 'size-1200'
| 'size-1250'
| 'size-1600'
| 'size-1700'
| 'size-2000'
| 'size-2400'
| 'size-3000'
| 'size-3400'
| 'size-3600'
| 'size-4600'
| 'size-5000'
| 'size-6000'
| 'static-size-0'
| 'static-size-10'
| 'static-size-25'
| 'static-size-50'
| 'static-size-40'
| 'static-size-65'
| 'static-size-100'
| 'static-size-115'
| 'static-size-125'
| 'static-size-150'
| 'static-size-175'
| 'static-size-200'
| 'static-size-225'
| 'static-size-250'
| 'static-size-300'
| 'static-size-400'
| 'static-size-450'
| 'static-size-500'
| 'static-size-550'
| 'static-size-600'
| 'static-size-700'
| 'static-size-800'
| 'static-size-900'
| 'static-size-1000'
| 'static-size-1200'
| 'static-size-1700'
| 'static-size-2400'
| 'static-size-2600'
| 'static-size-3400'
| 'static-size-3600'
| 'static-size-4600'
| 'static-size-5000'
| 'static-size-6000'
| 'single-line-height'
| 'single-line-width'
| string
& & { }
| number