Link

A link component who can get as property to pass custom linker. This component is a child from UniversalLink component.

Install and import #

yarn add @welcome-ui/link @xstyled/styled-components @xstyled/system react react-dom styled-components

import { Link } from '@welcome-ui/link'

Variants #

Can be primary by default or secondary

primary link
secondary link
Show editor

It can also be disabled

primary link
Show editor

It works on multiple lines too #

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.
Show editor

What is underlined by default? #

Link will add an underline to text nodes & Text components

This is a text node
JU
This is a text in a Text component
Show editor

Security #

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

with a target blank
Show editor

Usage with React Router #

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

Properties #

Dependencies #

• - @welcome-ui/system
  ^3.0.0
• - @welcome-ui/universal-link
  ^3.0.0

Peer dependencies #

• - @xstyled/styled-components
  ^2.2.3
• - @xstyled/system
  ^2.2.3
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.2.1