Link
Allows user to get our customized anchor element.
version
4.1.2
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 corporisneque commodi. Quasi odit esse molestias reprehenderit incidunt Velit non expedita atqueexercitationem enim! Quidem quasi nihil.</Link></Box>
What is underlined by default? #
Link
will add an underline to text nodes & Text
components
<Box><Link href="#"><Avatarname="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 #
Name | Type(s) | Default | Required |
---|---|---|---|
variant | "primary" "secondary" | ||
target | string & {} "_self" "_blank" "_parent" "_top" |
Packages #
Dependencies #
Peer dependencies #
Previous
DropdownMenuNext
Pagination