WUI logo

Link

The Link component is a navigational element that allows users to navigate to different pages or resources within or outside the application. It is typically styled as clickable text or an icon and can include attributes for accessibility and behavior customization. This component is essential for creating an intuitive and interconnected user experience.

Source@welcome-ui/link
OverviewProps
import * as React from 'react'
import { Link } from '@welcome-ui/link'


const Example = () => {
  return <Link href="#">Link</Link>
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/link
2

Import component:

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

Examples

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

Disabled

Add disabled property

Security

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

External link

isExternal add an <ExternalLink /> icon, and add special effect on hover.

With a Text component

By default link is set to medium on fontWeight, you can force inherit to get the parent style.

Usage with React Router

import { Link as RouterLink } from 'react-router-dom'


return (
  <Link as={RouterLink} to="/jobs">
    Jobs
  </Link>
)

What is underlined by default?

Link will add an underline to text nodes, Text components, span tags, components with as="span" or tagName="span" & children with data-wui-link prop

Dropdown menuPagination