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

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Importing Icons

We recommend using the pie-icons-webc package alongside pie-icon-button. 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 '@justeattakeaway/pie-webc/components/icon-button.js';
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
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`

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

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

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