Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

Playground

Layout recipes
Showcase

Link

Usage Guidelines

Link

Usage

import { Link } from '@loomhq/lens'
<Link>Content</Link>

Variants

Primary Neutral

<>
  <Link href='http://loom.com/'>
    Primary
  </Link> {' '}
  <Link variant="neutral" href='http://loom.com/'>
    Neutral
  </Link>
</>

<>
  <Link href='http://loom.com/'>
    Primary
  </Link> {' '}
  <Link variant="neutral" href='http://loom.com/'>
    Neutral
  </Link>
</>

Href

Take me somewhere

<Link href='http://loom.com/'>
  Take me somewhere
</Link>

<Link href='http://loom.com/'>
  Take me somewhere
</Link>

Examples

Link in a paragraph

Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures. clouds.com Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.

<Text>
  <span>{demoText.medium} </span>
  <Link href="http://clouds.com/">clouds.com</Link>
  <span> {demoText.medium}</span>
</Text>

<Text>
  <span>{demoText.medium} </span>
  <Link href="http://clouds.com/">clouds.com</Link>
  <span> {demoText.medium}</span>
</Text>

Ellipsis

Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.

<Text hasEllipsis>
  <Link href='http://loom.com/'>
    {demoText.medium}
  </Link>
</Text>

<Text hasEllipsis>
  <Link href='http://loom.com/'>
    {demoText.medium}
  </Link>
</Text>

Size

Big link

<Text size='xxlarge'>
  <Link href='http://loom.com/'>
    Big link
  </Link>
</Text>

<Text size='xxlarge'>
  <Link href='http://loom.com/'>
    Big link
  </Link>
</Text>

Props

name

type

default

variant

'neutral' | 'primary'

'primary'

children

React.ReactNode

href

string

onClick

React.ReactEventHandler