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-alpha.2
• - @welcome-ui/universal-link
  ^3.0.0-alpha.2

Peer dependencies

• - @xstyled/styled-components
  ^2.1.0
• - @xstyled/system
  ^2.1.0
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.0.0