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 Lit. It offers a simple and accessible link component for web applications.

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

Installation

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

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

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. Cannot be used if `tag` is set to `"button"`.	`undefined`
target		The `target` attribute to apply. Cannot be used if `tag` is set to `"button"`.	`undefined`
rel		The `rel` attribute to apply. Cannot be used if `tag` is set to `"button"`.	`undefined`
type	`"button"` `"reset"` `"submit"`	The `type` attribute to apply when `tag` is set to `"button"`.	`"submit"`
underline	`"default"` `"reversed"`	The underline behaviour of the link. The default behaviour has the link text underlined, with the underline disappearing on hover. `"reversed"` will only take effect if `isStandalone` is set to `true`.	`"default"`
isBold	`true` `false`	If true, makes 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"`	Sets the position of the icon relative to the text. Leading comes before the text and trailing comes after, taking writing direction into account. To use this, you must 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 emit any custom events. 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-webc/components/link.js'

<!-- 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 '@justeattakeaway/pie-webc/components/link.js';

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

For React Applications:

import { PieLink } from '@justeattakeaway/pie-webc/react/link.js';

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

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

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