Icon Button

An icon button uses icons as its primary visual element, representing actions or functions in a compact and visually appealing way.

Overview

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

# npm
$ npm i @justeattakeaway/pie-icon-button

# yarn
$ yarn add @justeattakeaway/pie-icon-button

Playground

Variants

Importing Icons

We recommend using the pie-icon-button component alongside the pie-icons-webc package. This package contains all of the PIE icons as importable web components and are built to work alongside our other PIE components.

pie-icon-button provides a slot into which you can pass your chosen icon, and it will automatically size it to the correct dimensions depending on the size of the pie-icon-button component.

Importing an icon with `pie-icons-webc`

To import an icon using pie-icons-webc, you should import the icon that you would like to use alongside the pie-icon-button component:

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

Then, in your markup, you would implement the component like this:

<pie-icon-button>
  <icon-close></icon-close>
</pie-icon-button>

Props

Prop	Options	Description	Default
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`

Events

This component does not use any custom event handlers. In order to add event listening to this component, you can treat it like a native HTML element in your application.

Examples

For HTML:

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

<!-- 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 { PieIconButton } from '@justeattakeaway/pie-icon-button';

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

For React Applications:

// React templates (using Next 13)
import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react.js';
import { IconClose } from '@justeattakeaway/pie-icons-webc/dist/react/IconClose.js';

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