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

View guidelines

Spectrum

Example#

<Link onPress={() => alert('pressed!')}>The missing link.</Link>

Content#

Links accept content as children. 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.

<Link onPress={() => alert('pressed!')}>A label</Link>

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>

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 "${e.target.textContent}" 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`	—	Called when the mouse or touch is released
`onPressStart`	`(e: PressEvent) => void`	—
`onPressEnd`	`(e: PressEvent) => void`	—
`onPressChange`	`(isPressed: boolean) => void`	—
`onPressUp`	`(e: PressEvent) => void`	—

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.

Name	Type	Description
`type`	`'pressstart' \| 'pressend' \| 'pressup' \| 'press'`
`pointerType`	`PointerType`
`target`	`HTMLElement`
`shiftKey`	`boolean`
`ctrlKey`	`boolean`
`metaKey`	`boolean`

'mouse'
  | 'pen'
  | 'touch'
  | 'keyboard'
  | 'virtual'

'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

Visual Options#

View Guidelines

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>

overBackground#

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