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 Lit. It offers a simple and accessible tag 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-tag 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"` `"large"`	Sets the size of the tag.	`"large"`
variant	`"neutral"` `"neutral-alternative"` `"outline"` `"ghost"` `"information"` `"success"` `"error"` `"brand-02"` `"brand-03"` `"brand-04"` `"brand-05"` `"brand-06"`	Sets the variant of the tag.	`"neutral"`
isStrong	`true` `false`	If true, displays strong tag styles for `"success"`, `"error"`, `"information"`, `"neutral"` and `"brand-05"` variants. Has no effect for other variants.	`false`
isInteractive	`true` `false`	When true, the tag will be rendered as a button and can be interacted with.	`false`
disabled	`true` `false`	For an interactive tag, this applies the disabled attribute to the button and styles it appropriately. For a non-interactive tag, this only applies the disabled styling.	`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. Can be only used if `isInteractive` is set to true	`"leading"`

You can customise the disabled appearance by setting the --tag-opacity css variable. The default opacity level for the disabled state 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.

Events

The interactive tag component does not emit any custom events. In order to add event listening to it, you can treat the component like a native HTML element in your application.

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-webc/components/tag.js'

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

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

For React Applications:

import { PieTag } from '@justeattakeaway/pie-webc/react/tag.js';

<PieTag>Label</PieTag>

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

<PieTag>Label</PieTag>