WUI logo

Link

Allows user to get our customized anchor element.

version

4.2.0

install

yarn add @welcome-ui/link

usage

import { Link } from '@welcome-ui/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>

It can also be disabled

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

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>

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>

Security #

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

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

Usage with React Router #

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

Properties #

NameType(s)DefaultRequired
variant
"primary"
"secondary"
target
string & {}
"_self"
"_blank"
"_parent"
"_top"

Packages #

Dependencies #
Peer dependencies #