Source Code | Design Documentation | NPM
@justeattakeaway/pie-chip is a Web Component built using the Lit library. It offers a simple and accessible chip component for web applications.
To install any of our web components in your application, we would suggest following the getting started guide to set up your project.
Ideally, you should install the component using the @justeattakeaway/pie-webc package, which includes all of the components. Or you can install the individual component package.
| 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 |
| 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. |
This component does not expose any CSS variables for style overrides.
| Event | Type | Description |
|---|---|---|
pie-chip-close |
CustomEvent |
Triggered when the user interacts with the close icon. |
Visit Chip | PIE Design System to view more information on this component.
For HTML:
// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/chip.js'<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>We recommend using @justeattakeaway/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>If you work at Just Eat Takeaway.com, please contact us on #help-designsystem. Otherwise, please raise an issue on Github.
Check out our contributing guide for more information on local development and how to run specific component tests.