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"` `"blue"` `"green"` `"yellow"` `"red"` `"brand"` `"brand-03"` `"brand-04"` `"brand-06"`	Sets the variant of the tag.	`"neutral"`
isStrong	`true` `false`	If true, displays strong tag styles for `"green"`, `"yellow"`, `"red"`, `"blue"` and `"neutral"` 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`

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.

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>