Link
Links allow users to navigate to a different location. They can be presented inline inside a paragraph or as standalone text.
| install | yarn add @react-spectrum/link |
|---|---|
| version | 3.0.0-alpha.1 |
| usage | import {Link} from '@react-spectrum/link' |
Example#
<Link><a href="https://www.imdb.com/title/tt6348138/" target="_blank">The missing link.</a></Link>Content#
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>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>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>Internationalization#
In order to internationalize a link, a localized string should be passed to the children prop.
Accessibility#
For string-typed children, the link component will expose the accessible role to assistive technology as a "link".
<Link onPress=e => alert(`clicked "" Link`)>
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.
Props#
| Name | Type | Default | Description |
variant | 'primary' | 'secondary' | 'overBackground' | "primary" | The visual style of the link. |
isQuiet | boolean | — | Whether the link should be displayed with a quiet style. |
children | ReactNode | — | The content to display in the link. |
UNSAFE_className | string | — | |
UNSAFE_style | CSSProperties | — |
Events
| 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 interation 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. |
Layout
| Name | Type | Default | Description |
flex | string | number | boolean | — | |
flexGrow | number | — | |
flexShrink | number | — | |
flexBasis | number | string | — | |
alignSelf | 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'stretch' | — | |
justifySelf | 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' | — | |
flexOrder | number | — | |
gridArea | string | — | |
gridColumn | string | — | |
gridRow | string | — | |
gridColumnStart | string | — | |
gridColumnEnd | string | — | |
gridRowStart | string | — | |
gridRowEnd | string | — |
Spacing
| Name | Type | Default | Description |
margin | DimensionValue | — | |
marginTop | DimensionValue | — | |
marginLeft | DimensionValue | — | |
marginRight | DimensionValue | — | |
marginBottom | DimensionValue | — | |
marginStart | DimensionValue | — | |
marginEnd | DimensionValue | — | |
marginX | DimensionValue | — | |
marginY | DimensionValue | — |
Sizing
| Name | Type | Default | Description |
width | DimensionValue | — | |
minWidth | DimensionValue | — | |
maxWidth | DimensionValue | — | |
height | DimensionValue | — | |
minHeight | DimensionValue | — | |
maxHeight | DimensionValue | — |
Positioning
| Name | Type | Default | Description |
position | 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' | — | |
top | DimensionValue | — | |
bottom | DimensionValue | — | |
left | DimensionValue | — | |
right | DimensionValue | — | |
start | DimensionValue | — | |
end | DimensionValue | — | |
zIndex | number | — | |
isHidden | boolean | — |
Accessibility
| Name | Type | Default | Description |
role | string | — | |
id | string | — | |
tabIndex | number | — | |
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-controls | string | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
aria-owns | string | — | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
aria-hidden | boolean | 'false' | 'true' | — | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |
Visual options#
Primary#
<p>Would you like to <Link variant="primary">learn more</Link> about this fine component?</p>Secondary#
<p>Would you like to <Link variant="secondary">learn more</Link> about this fine component?</p>Over background#
<View backgroundColor="positive" padding="25px">
<Link variant="overBackground">Learn more here!</Link>
</View>quiet#
<p>Would you like to <Link isQuiet>learn more</Link> about this fine component?</p>