Link

Links allow users to navigate to a different location. They can be presented inline inside a paragraph or as standalone text.

The missing link

children

variant

staticColor

isStandalone

isQuiet

import {Link} from '@react-spectrum/s2';

<Link
  href="https://www.imdb.com/title/tt6348138/"
  target="_blank">
  The missing link
</Link>

Events

Links with an href will be handled by the browser, or via a client side router. Links without an href will be rendered as a <span role="link"> instead of an <a>. Use the onPress event to handle user interaction.

Link

import {Link} from '@react-spectrum/s2';

<Link onPress={() => alert('Pressed link')}>Link</Link>

API

Name	Type	Default
`children`	`ReactNode`	Default: —
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`variant`	`'primary' \| 'secondary'`	Default: `'primary'`
The visual style of the link.
`staticColor`	`'white' \| 'black' \| 'auto'`	Default: —
The static color style to apply. Useful when the link appears over a color background.
`isStandalone`	`boolean`	Default: —
Whether the link is on its own vs inside a longer string of text.
`isQuiet`	`boolean`	Default: —
Whether the link should be displayed with a quiet style.