Chip

A chip is a compact component used to represent information or selected choices.

Overview

pie-chip is a Web Component built using Lit. It offers a simple and accessible chip 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-chip 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
variant	`"default"` `"outline"` `"ghost"`	Sets the variant of the chip.	`"default"`
disabled	`true` `false`	If true, disables the chip.	`false`
isSelected	`true` `false`	If true, the chip component will apply the selected styles.	`false`
isDismissible	`true` `false`	If true, displays a close icon. Can be only used if `isSelected` is set to true	`false`
isLoading	`true` `false`	If true, displays a loading indicator inside the chip.	`false`
aria	`{ label?: string, close?: string }`	Aria properties for the chip to help with making it accessible.	`undefined`

Slots

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

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

Events

When the chip component is not dismissible, it does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.

When the component is dismissible, you will need to listen to the close event listed in the table below.

Event	Type	Description
`pie-chip-close`	`CustomEvent`	Triggered when the user interacts with the close icon.

Examples

For HTML:

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

<!-- pass js file into <script> chip -->
<pie-chip>String</pie-chip>
<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/chip.js';

<pie-chip>String</pie-chip>

For React Applications:

import { PieChip } from '@justeattakeaway/pie-webc/react/chip.js';

<PieChip>String</PieChip>

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

<PieChip>String</PieChip>