@justeattakeaway/pie-icon-button NPM

@justeattakeaway/pie-icon-button

Source Code | Design Documentation | NPM

@justeattakeaway/pie-icon-button is a Web Component built using the Lit library. It offers a simple and accessible icon button component for web applications.

Installation

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.

Documentation

Properties

Prop	Options	Description	Default
`aria`	`{ label?: string }`, `{ labelledby?: string }`, `{ describedby?: string }`, `{ expanded?: boolean }`, `{ controls?: string }`	The ARIA attributes available to use on the icon button. Offers `label`, `labelledby`, `describedby`, `expanded` and `controls`.	`undefined`
`size`	`"xsmall"`, `"small"`, `"medium"`, `"large"`	Set the size of the icon button.	`"medium"`
`variant`	`"primary"`, `"secondary"`, `"outline"`, `"ghost"`, `"ghost-secondary"`, `"inverse"`, `"ghost-inverse"`	Set the variant of the icon button.	`"primary"`
`disabled`	`true`, `false`	If true, disables the icon button.	`false`
`isLoading`	`true`, `false`	If true, displays a loading indicator inside the icon button.	`false`

Slots

Slot	Description
`default`	The default slot is used to pass an icon into the icon button component. Please use an icon from `justeattakeaway/pie-icons-webc`.

CSS Variables

This component does not expose any CSS variables for style overrides.

Events

This component 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.

Usage Examples

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/icon-button.js';
import '@justeattakeaway/pie-icons-webc/dist/IconClose.js';

<!-- pass js file into <script> tag -->
<pie-icon-button onclick="e => console.log(e)">
  <icon-close></icon-close>
</pie-icon-button>
<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/icon-button.js';

<pie-icon-button @click="handleClick">
  <icon-close></icon-close>
</pie-icon-button>

For React Applications:

import { PieIconButton } from '@justeattakeaway/pie-webc/react/icon-button.js';
import { IconClose } from '@justeattakeaway/pie-icons-webc/dist/react/IconClose.js';

<PieIconButton onClick={handleClick}>
  <IconClose></IconClose>
</PieIconButton>

Questions and Support

If you work at Just Eat Takeaway.com, please contact us on #help-designsystem. Otherwise, please raise an issue on Github.

Contributing

Check out our contributing guide for more information on local development and how to run specific component tests.

@justeattakeaway/pie-icons-webc @justeattakeaway/pie-spinner @justeattakeaway/pie-webc-core

@everything-registry/sub-chunk-505 pie-storybook @justeattakeaway/pie-modal @justeattakeaway/pie-ai-suggestions @justeattakeaway/pie-cookie-banner @justeattakeaway/pie-notification @justeattakeaway/pie-toast @justeattakeaway/pie-webc

0.0.0-snapshot-release-20250402144833

7 months ago

0.0.0-snapshot-release-20250401083408

7 months ago

0.0.0-snapshot-release-20250401114537

7 months ago

0.0.0-snapshot-release-20250403120740

7 months ago

12 months ago

12 months ago

5 months ago

5 months ago

5 months ago

5 months ago

0.0.0-snapshot-release-20250401112338

7 months ago

0.0.0-snapshot-release-20250403115646

7 months ago

1.4.4

5 months ago

1.4.3

5 months ago

0.0.0-snapshot-release-20250402140438

7 months ago

1.4.2

7 months ago

1.4.1

7 months ago

1.4.0

7 months ago

0.0.0-snapshot-release-20250403144335

7 months ago

0.0.0-snapshot-release-20250420100322

6 months ago

0.0.0-snapshot-release-20250318151651

7 months ago

0.0.0-snapshot-release-20250403083408

7 months ago

0.0.0-snapshot-release-20250327145821

7 months ago

1.3.2

8 months ago

1.3.1

8 months ago

1.3.0

8 months ago

0.0.0-snapshot-release-20250605141200

5 months ago

1.2.0

8 months ago

0.0.0-snapshot-release-20250402142019

7 months ago

1.2.2

8 months ago

0.0.0-snapshot-release-20250403105654

7 months ago

1.2.1

8 months ago

0.0.0-snapshot-release-20250328101207

7 months ago

2.0.0

4 months ago

0.0.0-snapshot-release-20250409083634

7 months ago

0.0.0-snapshot-release-20250207102928

9 months ago

0.0.0-snapshot-release-20250403082233

7 months ago

0.0.0-snapshot-release-20250403114350

7 months ago

1.1.1

9 months ago

0.0.0-snapshot-release-20250327123015

7 months ago

1.1.0

10 months ago

0.0.0-snapshot-release-20250212135726

8 months ago

1.0.0

12 months ago

0.0.0-snapshot-release-20250403123308

7 months ago

0.0.0-snapshot-release-20250408123207

7 months ago

0.0.0-snapshot-release-20250206164440

9 months ago

0.0.0-snapshot-release-20250520075727

5 months ago

0.0.0-snapshot-release-20250318122016

7 months ago

0.0.0-snapshot-release-20250402092308

7 months ago

0.0.0-snapshot-release-20250325173254

7 months ago

0.0.0-snapshot-release-20250514110916

5 months ago

0.0.0-snapshot-release-20250605162115

5 months ago

0.0.0-snapshot-release-20250409103825

7 months ago

0.0.0-snapshot-release-20250325171407

7 months ago

0.0.0-snapshot-release-20250403094112

7 months ago

0.0.0-snapshot-release-20250327135732

7 months ago

0.0.0-snapshot-release-20241031152540

12 months ago

0.0.0-snapshot-release-20241016144556

1 year ago

0.0.0-snapshot-release-20241010151511

1 year ago

0.29.0

1 year ago

0.0.0-snapshot-release-20241010132507

1 year ago

0.0.0-snapshot-release-20241009074625

1 year ago

0.0.0-snapshot-release-20240927094312

1 year ago

0.0.0-snapshot-release-20241009152044

1 year ago

0.28.14

1 year ago

0.28.13

1 year ago

0.0.0-snapshot-release-20240829091047

1 year ago

0.0.0-snapshot-release-20240902111409

1 year ago

0.28.12

1 year ago

0.28.11

1 year ago

0.0.0-snapshot-release-20240619133108

1 year ago

0.0.0-snapshot-release-20240709100447

1 year ago

0.0.0-snapshot-release-20240531152027

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-snapshot-release-20240516144918

1 year ago

0.0.0-snapshot-release-20240501131344

1 year ago

0.28.5

1 year ago

0.28.4

1 year ago

0.0.0-snapshot-release-20240426153518

1 year ago

0.0.0-snapshot-release-20240425111612

1 year ago

0.0.0-snapshot-release-20240424153236

1 year ago

0.0.0-snapshot-release-20240423133259

1 year ago

0.0.0-snapshot-release-20240424140720

1 year ago

0.0.0-snapshot-release-20240423145420

1 year ago

0.0.0-snapshot-release-20240423162431

1 year ago

0.0.0-snapshot-release-20240423160825

1 year ago

0.0.0-snapshot-release-20240424112145

1 year ago

0.0.0-snapshot-release-20240424143240

1 year ago

0.0.0-snapshot-release-20240424101641

1 year ago

0.0.0-snapshot-release-20240424134804

1 year ago

0.28.3

2 years ago

0.28.2

2 years ago

0.0.0-snapshot-release-20240411081540

2 years ago

0.0.0-snapshot-release-20240409162316

2 years ago

0.28.1

2 years ago

0.0.0-snapshot-release-20240405122316

2 years ago

0.0.0-snapshot-release-20240405110454

2 years ago

0.0.0-snapshot-release-20240405114830

2 years ago

0.0.0-snapshot-release-20240405071915

2 years ago

0.0.0-snapshot-release-20240404085438

2 years ago

0.0.0-snapshot-release-20240404144605

2 years ago

0.0.0-snapshot-release-20240404115951

2 years ago

0.0.0-snapshot-release-20240404150654

2 years ago

0.0.0-snapshot-release-20240404151611

2 years ago

0.0.0-snapshot-release-20240404092836

2 years ago

0.28.0

2 years ago

0.0.0-snapshot-release-20240321151406

2 years ago

0.0.0-snapshot-release-20240321141351

2 years ago

0.27.7

2 years ago

0.0.0-snapshot-release-20240229155253

2 years ago

0.0.0-snapshot-release-20240229152723

2 years ago

0.27.6

2 years ago

0.27.5

2 years ago

0.27.4

2 years ago

0.0.0-snapshot-release-20240209112948

2 years ago

0.27.3

2 years ago

0.0.0-snapshot-release-20240125091403

2 years ago

0.0.0-snapshot-release-20240125120047

2 years ago

0.0.0-snapshot-release-20240125103637

2 years ago

0.0.0-snapshot-release-20240125105736

2 years ago

0.0.0-snapshot-release-20240124164834

2 years ago

0.0.0-snapshot-release-20240124172329

2 years ago

0.0.0-snapshot-release-20240124173224

2 years ago

0.0.0-snapshot-release-20240124162427

2 years ago

0.0.0-snapshot-release-20240123161344

2 years ago

0.0.0-snapshot-release-20240123163102

2 years ago

0.0.0-snapshot-release-20240123105631

2 years ago

0.0.0-snapshot-release-20240123164441

2 years ago

0.0.0-snapshot-release-20240119141012

2 years ago

0.27.2

2 years ago

0.27.1

2 years ago

0.27.0

2 years ago

0.0.0-snapshot-release-20240111085712

2 years ago

0.0.0-snapshot-release-20240111110632

2 years ago

0.0.0-snapshot-release-20240110090516

2 years ago

0.0.0-snapshot-release-20240108140746

2 years ago

0.26.0

2 years ago

0.0.0-snapshot-release-20240105125445

2 years ago

0.25.2

2 years ago

0.0.0-snapshot-release-20240105142421

2 years ago

0.0.0-snapshot-release-20240105110833

2 years ago

0.0.0-snapshot-release-20240104162246

2 years ago

0.25.1

2 years ago

0.0.0-snapshot-release-20240104130154

2 years ago

0.0.0-snapshot-release-20240102161022

2 years ago

0.25.0

2 years ago

0.0.0-snapshot-release-20240102144723

2 years ago

0.0.0-snapshot-release-20231222155902

2 years ago

0.0.0-snapshot-release-20231221152103

2 years ago

0.0.0-snapshot-release-20231221131859

2 years ago

0.0.0-snapshot-release-20231219145731

2 years ago

0.0.0-snapshot-release-20231219091122

2 years ago

0.0.0-snapshot-release-20231218095446

2 years ago

0.0.0-snapshot-release-20231218154706

2 years ago

0.0.0-snapshot-release-20231218150157

2 years ago

0.0.0-snapshot-release-20231215150338

2 years ago

0.0.0-snapshot-release-20231214113353

2 years ago

0.0.0-snapshot-release-20231214081533

2 years ago

0.0.0-snapshot-release-20231213151043

2 years ago

0.0.0-snapshot-release-20231212141542

2 years ago

0.24.3

2 years ago

0.24.2

2 years ago

0.0.0-snapshot-release-20231130164403

2 years ago

0.0.0-snapshot-release-20231201131015

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-snapshot-release-20231201144021

2 years ago

0.0.0-snapshot-release-20231201125240

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-snapshot-release-20231129145325

2 years ago

0.18.0

2 years ago

0.10.0

2 years ago

0.0.0-snapshot-release-20231130151848

2 years ago

0.0.0-snapshot-release-20231130144625

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

@justeattakeaway/pie-icon-button v2.0.0