Link

A link is an interactive element in a user interface that allows users to navigate to another resource or location, typically on the web.

Overview

pie-link is a Web Component built using the Lit library. It offers a simple and accessible link component for web applications.

This component can be easily integrated into various frontend frameworks and customized through a set of properties.

Installation

To install pie-link in your application, run the following on your command line:

# npm
$ npm i @justeattakeaway/pie-link

# yarn
$ yarn add @justeattakeaway/pie-link

Playground

Variants

Props

Prop	Options	Description	Default
size	`"small"` `"medium"`	Sets the size of the link.	`"medium"`
variant	`"default"` `"high-visibility"` `"inverse"`	Sets the variant of the link.	`"default"`
tag	`"a"` `"button"`	Which HTML tag to use for the link.	`"a"`
href		The `href` attribute to apply.	`undefined`
target		The `target` attribute to apply.	`undefined`
rel		The `rel` attribute to apply	`undefined`
type	`"button"` `"reset"` `"submit"`	The `type` attribute to apply when the link has `tag="button"`.	`"submit"`
underline	`"default"` `"reversed"`	The underline behavior of the link. The `reversed` value can only be used if `isStandalone` is set to true.	`"default"`
isBold	`true` `false`	if `true`, sets the link text bold.	`false`
isStandalone	`true` `false`	if `true`, sets the link as a block element.	`false`
hasVisited	`true` `false`	if `true`, the link will apply the styles for the visited state.	`false`
iconPlacement	`"leading"` `"trailing"`	Show a leading/trailing icon. Leading comes before the text and trailing comes after, taking writing direction into account. To use this with pie-button, you can pass an icon into the icon slot.	`undefined`
aria	`{ label?: string }`	Aria properties for the link to help with making it accessible.	`undefined`

Slots

Slot	Description
`default`	The default slot is used to pass text into the link component.
`icon`	Used to pass in an icon to the link component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using pie-icons-webc for defining this icon, but this can also accept an SVG icon.

Using `pie-icons-webc` with the `pie-link` icon slot

We recommend using pie-icons-webc when using the icon slot. Here is an example of how you would do this:

<!--
  Note that pie-link and the icons that you want to use will need to be imported as components into your application.
  See the `pie-icons-webc` README for more info on importing these icons.
-->
<pie-link>
    <icon-plus-circle slot="icon"></icon-plus-circle>
    Search
</pie-link>

Events

This component does not use any custom event handlers. However, in order to use event listeners such as onclick to this component, you should pass the tag="button" prop to the component so it's treated like a native button element while maintaining the link look.

Examples

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-link'

<!-- pass js file into <script> tag -->
<pie-link href="https://www.pie.design">pie.design</pie-link>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Vue templates (using Nuxt 3)
import { PieLink } from '@justeattakeaway/pie-link';

<pie-link href="https://www.pie.design">pie.design</pie-link>

For React Applications:

// React templates (using Next 13)
import { PieLink } from '@justeattakeaway/pie-link/dist/react';

<PieLink href="https://www.pie.design">pie.design</PieLink>