Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

CSS utilities
CSS variables

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

prop

type

default

required

variant

oneOf: "neutral", "primary"

'primary'

children

node

required

href

string

onClick

func