Link

Renders a link, either as an anchor tag or a button.

Click Here

---

Usage

import { Link } from "@newfold/ui-component-library";

<Link>Click Here</Link>

---

Anchor

When the link component is used as an anchor tag, you can pass the href, target and rel props.

Google

<Link
    href="https://www.google.com/"
    target="_self"
    rel="noopener noreferrer"
>
    Google
</Link>

tip

Accessibility tip: when using target target="_blank", you can add a visually hidden text inside the link to notify screen reader users to the fact that the link opens in a new tab.

(Opens in a new browser tab)Link with visually hidden text

<Link
    href="https://www.google.com/"
    target="_blank"
    rel="noopener noreferrer"
>
    <span className="nfd-sr-only">
        (Opens in a new browser tab)
    </span>
    Link with visually hidden text
</Link>

---

Button

When the link component is used as a button, you can pass the onClick prop to add functionality.

 <Link
    as="button"
    onClick={() => alert('Hello World!')}
>
    Link as a button
</Link>

---

Custom Component

You can pass a custom component to the as prop to render a custom link.

const Component = ( { className, children } ) => <span className={ className }>Custom { children }</span>

<Link as={ Component }>
  component link
</Link>

---

Props

Attribute	Type	Description	Default
children*	node |	Link content	-
variant	default | primary | error |	Link variant	default
as	a | button | <Component /> |	Rendered HTML element	a
className	string |	-	-