Skip to main content

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

GitHub Workflow Status GitHub Workflow Status

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

PropOptionsDescriptionDefault
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"
hrefThe href attribute to apply.
Cannot be used if tag is set to "button".
undefined
targetThe target attribute to apply.
Cannot be used if tag is set to "button".
undefined
relThe 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"
isBoldtrue
false
If true, makes the link text bold.false
isStandalonetrue
false
If true, sets the link as a block element.false
hasVisitedtrue
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

SlotDescription
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.

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>

Changelog