@justeattakeaway/pie-button v1.6.4

@justeattakeaway/pie-button

Source Code | Design Documentation | NPM

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

Table of Contents

• Installation
• Documentation
  • Properties
  • Slots
  • CSS Variables
  • Events
• Forms Usage
  • Button Attributes
  • Form Integration Example
• 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

Properties

Slots

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.

Forms Usage

The pie-button web component is designed to integrate with standard HTML forms just like a native HTML button. When positioned inside a form, the component will automatically associate itself, enabling it to directly interact with the form context.

Button Attributes

The pie-button provides a set of attributes to customise its behaviour within forms:

• type: Determines the button's function. Set to submit for form submissions or reset to clear form fields.
• formaction: Designates an alternative URL for form data submission when this specific button is clicked.
• formenctype: Specifies the form data encoding type during submission via this button.
• formmethod: Sets the HTTP method (e.g., GET or POST) for form data when initiated by this button.
• formnovalidate: If present, ensures the form is submitted without validation checks.
• formtarget: Dictates where to display the response after form submission.

Form Integration Example

<form action="/default-endpoint" method="post">
    <input type="text" name="username" required>
    <pie-button
        type="submit"
        formaction="/alternate-endpoint"
        formenctype="multipart/form-data"
        formmethod="post"
        formnovalidate
        formtarget="_blank">
        Submit
    </pie-button>
</form>

In this example:

• The pie-button, when clicked, will send the form data to /alternate-endpoint instead of the form's default /default-endpoint.
• It uses the multipart/form-data encoding type for form submission.
• The form will submit using the POST method.
• No validation will be performed during submission, thanks to formnovalidate.
• The form's submission response will be opened in a new browser tab/window because of the formtarget="_blank" attribute.

Usage Examples

For HTML:

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

<pie-button type="reset" isFullWidth="true" onclick="e => console.log(e)">
  Click me!
</pie-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/button.js';

<pie-button @click="handleClick" size="large" type="button" variant="secondary">
  Click me!
</pie-button>

For React Applications:

import { PieButton } from '@justeattakeaway/pie-webc/react/button.js';

<PieButton onClick={handleClick}>
  increment
</PieButton>

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.