Link | Snapshot UI

An inline link in Link Blue, always underlined, with a thicker underline on hover and press.

Examples

Link Blue and an underline mark a link, so color is never the only cue. The underline thickens on hover and press.

Example

Preview

Code

Every component is built on React Aria, and every color pairing is checked in both modes. The design system document has the measurements.

Follows the page theme and corners

'use client';

import { Link } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

export default function LinkInline(): ReactElement {
  return (
    <p style={{ margin: 0, textAlign: 'center' }}>
      Every component is built on <Link href="https://react-aria.adobe.com">React Aria</Link>, and every color
      pairing is checked in both modes. The{' '}
      <Link href="https://github.com/amirehsan/snapshot-ui/blob/main/docs/design-system.md" target="_blank">
        design system document
      </Link>{' '}
      has the measurements.
    </p>
  );
}

States

A disabled link is Dust Taupe and keeps its underline, so the word still reads as a link that is switched off.

Example

Preview

Code

Read the guideRead the guide

Follows the page theme and corners

'use client';

import { Link } from '@snapshot-ui/react';
import type { ReactElement } from 'react';

export default function LinkStates(): ReactElement {
  return (
    <div className="row" style={{ justifyContent: 'center', gap: 24 }}>
      <Link href="https://react-aria.adobe.com">Read the guide</Link>
      <Link href="https://react-aria.adobe.com" isDisabled>
        Read the guide
      </Link>
    </div>
  );
}

Usage

Give it an href. For a link that opens a new tab, pass target and rel as you would to an anchor.

import { Link } from '@snapshot-ui/react';

export function Footnote() {
  return (
    <p>
      Built on{' '}
      <Link href="https://react-aria.adobe.com" target="_blank">
        React Aria
      </Link>
      .
    </p>
  );
}

Every link follows the app's router through one RouterProvider; see Routing.

Props

Every React Aria Link prop is accepted. These are the ones Snapshot UI adds or changes.

className ClassNameOrFunction<LinkRenderProps>	A class name, or a function of the link's state, merged after the library's own class.
href string	A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
isDisabled boolean	Whether the link is disabled.
onPress ((e: PressEvent) => void)	Handler that is called when the press is released over the target.
rel string	The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
target HTMLAttributeAnchorTarget	The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).

Accessibility

A native anchor, with React Aria handling press across mouse, touch and keyboard. A disabled link is announced as disabled and cannot be followed.

Link sets no rel of its own. Browsers already treat target="_blank" as noopener, so add rel="noreferrer" only to hide where the visitor came from. A link that opens a new tab should say so in or beside its text, for people who cannot see the tab bar.

`Enter`	Follows the link.
`Tab`	Moves focus to it. The 2px ink ring sits outside the text.

Design rules

What keeps links in the system.

Say where the link goes, such as Read the guide.

Keep the underline. It is what marks the link.

Never use a link for an action. Something that does a job is a Button.

Never style a link by color alone.