Link

A link allows a user to navigate to another page or resource within a web page or application.

The missing link

children

isDisabled

Example

Link.tsx

Link.css

Example

Link.tsx

Link.css

import {Link} from './Link';

<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 './Link';

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

API

Name	Type
`isDisabled`	`boolean`
Whether the link is disabled.
`children`	`ChildrenOrFunction<LinkRenderProps>`
The children of the component. A function may be provided to alter the children based on component state.

Default className: react-aria-Link

Render Prop	CSS Selector
`isCurrent`	CSS Selector: `[data-current]`
Whether the link is the current item within a list.
`isHovered`	CSS Selector: `[data-hovered]`
Whether the link is currently hovered with a mouse.
`isPressed`	CSS Selector: `[data-pressed]`
Whether the link is currently in a pressed state.
`isFocused`	CSS Selector: `[data-focused]`
Whether the link is focused, either via a mouse or keyboard.
`isFocusVisible`	CSS Selector: `[data-focus-visible]`
Whether the link is keyboard focused.
`isDisabled`	CSS Selector: `[data-disabled]`
Whether the link is disabled.