Chip

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

Overview

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

# npm
$ npm i @justeattakeaway/pie-chip

# yarn
$ yarn add @justeattakeaway/pie-chip

Playground

Variants

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`
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>

Examples

For HTML:

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

<!-- 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 { PieChip } from '@justeattakeaway/pie-chip';

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

For React Applications:

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

<PieChip>String</PieChip>