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>