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

Table of Contents

- Installation
- Documentation
- Properties
- Slots
- CSS Variables
- Events
- Usage Examples
- Questions and Support
- Contributing

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

$3

| 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", "primary-alternative", "primary-alternative-dark", "secondary", "outline", "ghost", "ghost-secondary", "ghost-secondary-dark", "inverse", "inverse-outline", "ghost-inverse", "ghost-inverse-light", "translucent" | 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 |

$3

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

$3

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

$3

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:

``js
// 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';
`

`html





`

For Native JS Applications, Vue, Angular, Svelte, etc.:

`js
// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/icon-button.js';




`

For React Applications:

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




``

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.