Link

About #

A link component who can get as property to pass custom linker.

This component is a child from UniversalLink component.

Variants #

Can be primary by default or secondary

<Box>
  <Link href="#">primary link</Link>
</Box>
<Box>
  <Link href="#" variant="secondary">
    secondary link
  </Link>
</Box>
Copy

It can also be disabled

<Link disabled href="#">
  primary link
</Link>
Copy

It works on multiple lines too #

<Box>
  <Link href="#" display="inline" variant="primary">
    Ipsum ipsam fugiat doloribus sit hic ducimus dolorem Aperiam unde adipisci deserunt corporis
    neque commodi. Quasi odit esse molestias reprehenderit incidunt Velit non expedita atque
    exercitationem enim! Quidem quasi nihil.
  </Link>
</Box>
Copy

What is underlined by default? #

Link will add an underline to text nodes & Text components

<Box>
  <Link href="#">
    <Avatar
      name="jungle"
      size="lg"
      src="https://avatars3.githubusercontent.com/u/13100706?s=200&v=4"
    />
    This is a text node
  </Link>
</Box>
<Box>
  <Link href="#">
    <Avatar name="jungle" size="lg" />
    <Text>This is a text in a Text component</Text>
  </Link>
</Box>
Copy

Security #

For a target _blank we add rel='noopener noreferrer'

<Link href="#" target="_blank">
  with a target blank
</Link>
Copy

Usage with React Router #

import { Link as RouterLink } from 'react-router-dom'
<Link as={RouterLink} to="/jobs">
  Jobs
</Link>

Properties #

Packages #

Dependencies #

Peer dependencies #