Link

An inline link, plain or underlined.

Read the style guide or contact support.

Link.tsx

import {Link, Text} from 'alinea/components'

export function LinkExample() {
  return (
    <Text>
      Read the <Link href="#guide">style guide</Link> or{' '}
      <Link href="#support" variant="underline">
        contact support
      </Link>
      .
    </Text>
  )
}

Attributes

Besides href, the link passes target, rel, download, title, tabIndex, lang, hrefLang, referrerPolicy and aria-current to its <a>. Mark the link to the page that is shown with aria-current="page".

Props

PropTypeDefaultDescription

hrefstringDefault –

targetstringDefault –

relstringDefault –

downloadboolean | stringDefault –

titlestringDefault –Tooltip text

tabIndexnumberDefault –

langstringDefault –

hrefLangstringDefault –

referrerPolicyHTMLAttributeReferrerPolicyDefault –

variant'plain' | 'underline'Default 'plain'plain underlines on hover, underline is always underlined

disabledbooleanDefault –

onClick(event: MouseEvent<HTMLAnchorElement>) => voidDefault –

refRef<HTMLAnchorElement>Default –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.