Tag

A tag is a small visual element used to represent and categorise information within a user interface.

Overview

pie-tag is a Web Component built using the Lit library. It offers a simple and accessible tag 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-tag in your application, run the following on your command line:

# npm
$ npm i @justeattakeaway/pie-tag

# yarn
$ yarn add @justeattakeaway/pie-tag

Playground

Variants

Props

Prop	Options	Description	Default
size	`"small"` `"large"`	Sets the size of the tag.	`"large"`
variant	`"neutral-alternative"` `"neutral"` `"outline"` `"ghost"` `"blue"` `"green"` `"yellow"` `"red"` `"brand"`	Sets the variant of the tag.	`"neutral"`
isStrong	`true` `false`	If `true`, displays strong tag styles for `green`, `yellow`, `red`, `blue` and `neutral` variants.	`false`

Since the component is not interactive, it doesn't have a disabled property. To give the Tag a disabled look, please set the --tag-opacity css variable. Recommended opacity level for disabled tag is 0.5.

Slots

Slot	Description
`default`	The default slot is used to pass text into the tag component.
`icon`	Used to pass in an icon to the tag component.

Using `pie-icons-webc` with the `pie-tag` 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-tag 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-tag>
    <icon-vegan slot="icon"></icon-vegan>
    Label
</pie-tag>

Examples

For HTML:

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

<!-- pass js file into <script> tag -->
<pie-tag>Label</pie-tag>
<script type="module" src="/main.js"></script>

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

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

<pie-tag>Label</pie-tag>

For React Applications:

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

<PieTag>Label</PieTag>