@justeattakeaway/pie-modal NPM

@justeattakeaway/pie-modal

Source Code | Design Documentation | NPM

@justeattakeaway/pie-modal is a Web Component built using the Lit library. It offers a simple and accessible modal 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`	—	An object representing the aria labels for the `close` and `back` buttons within the modal as well as the `isLoading` state labels (`aria-label` & `aria-busy`).	—
`hasBackButton`	`true`, `false`	If true, the modal includes a back button which closes the modal when clicked.	`false`
`hasStackedActions`	`true`, `false`	If true, the action buttons will be stacked (full width) at narrow breakpoints.	`false`
`heading`	—	The heading text of the modal.	—
`headingLevel`	`h1`, `h2`, `h3`, `h4`, `h5`, `h6`	The HTML tag to use for the modal's heading.	`h2`
`isDismissible`	`true`, `false`	If true, the modal includes a close button and can be dismissed by clicking on the backdrop or pressing the `Esc` key.	`false`
`isFooterPinned`	`true`, `false`	When false, the modal footer will scroll with the content inside the modal body.	`true`
`isFullWidthBelowMid`	`true`, `false`	If true and the page is narrower than the mid breakpoint, a medium-sized modal will take up the full width of the screen.	`false`
`isLoading`	`true`, `false`	When true, displays a loading spinner in the modal.	`false`
`isOpen`	`true`, `false`	Controls if the modal element is open or closed.	`false`
`leadingAction.text`	—	The text to display inside the leading action button. The button won't render without this.	—
`leadingAction.variant`	See pie-button's variants	The variant of the leading action button.	`"primary"`
`supportingAction.text`	—	The text to display inside the supporting action button. The button won't render without this.	—
`supportingAction.variant`	See pie-button's variants	The variant of the supporting action button.	`"ghost"`
`position`	`"center"`, `"top"`	The position of the modal; this controls where it will appear on the page.	`"center"`
`returnFocusAfterCloseSelector`	—	If provided, focus will be sent to the first element that matches this selector when the modal is closed. If not provided, the `dialog` element will return focus to the element that opened the modal.	—
`size`	`"small"`, `"medium"`, `"large"`	Determines the maximum width of the modal. Large modals will expand to fill the entire page at narrow viewports.	`"medium"`

Slots

Slot	Description
`default`	The default slot is used to pass content into the modal component.
`footer`	Used to pass optional content to the modal component footer area.

CSS Variables

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

Events

Event	Type	Description
`pie-modal-open`	`CustomEvent`	Triggered when the modal is opened.
`pie-modal-close`	`CustomEvent`	Triggered when the modal is closed.
`pie-modal-back`	`CustomEvent`	Triggered when the modal back button is clicked.
`pie-modal-leading-action-click`	`CustomEvent`	Triggered when the modal leading action is clicked.
`pie-modal-supporting-action-click`	`CustomEvent`	Triggered when the modal supporting action is clicked.

Legacy browser support

pie-modal uses the Dialog element which might not be supported by legacy browsers.

To support them, pie-modal uses the dialog-polyfill package. It works automatically and doesn't need any setup.

The polyfill comes with a few limitations, as noted on its documentation page:

Dialogs should not be contained by parents that create a stacking context

The browser's chrome may not always be accessible via the tab key
Changes to the CSS top/bottom values while open aren't retained
For more details, check the package documentation mentioned above.

Usage Examples

For HTML:

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

<!-- pass js file into <script> tag -->
<pie-modal heading='My Awesome Heading' headingLevel='h3'>Click me!</pie-modal>
<script type="module" src="/main.js"></script>

With a custom footer slot:

<pie-modal heading='My Awesome Heading' headingLevel='h3'>
  <p>Click me!</p>
  <div slot="footer">
    <p>Custom footer content!</p>
  </div>
</pie-modal>

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

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

<pie-modal heading="My Awesome Heading" headingLevel="h3">Click me!</pie-modal>

For React Applications:

import { PieModal } from '@justeattakeaway/pie-webc/react/modal.js';

<PieModal heading='My Awesome Heading' headingLevel='h3'>Click me!</PieModal>

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-button @justeattakeaway/pie-icon-button @justeattakeaway/pie-icons-webc @justeattakeaway/pie-spinner @justeattakeaway/pie-webc-core body-scroll-lock dialog-polyfill

@everything-registry/sub-chunk-505 pie-storybook @justeattakeaway/pie-cookie-banner @justeattakeaway/pie-webc

0.0.0-snapshot-release-20250402144833

1 year ago

1.6.2

1 year ago

1.6.1

1 year ago

1.6.0

1 year ago

0.0.0-snapshot-release-20250401083408

1 year ago

0.0.0-snapshot-release-20250401114537

1 year ago

0.0.0-snapshot-release-20250114115442

1 year ago

0.0.0-snapshot-release-20250403120740

1 year ago

0.0.0-snapshot-release-20241128132140

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-snapshot-release-20250401112338

1 year ago

0.0.0-snapshot-release-20250403115646

1 year ago

0.0.0-snapshot-release-20250402140438

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-snapshot-release-20250403144335

1 year ago

0.0.0-snapshot-release-20250420100322

1 year ago

0.0.0-snapshot-release-20250113131552

1 year ago

0.0.0-snapshot-release-20250318151651

1 year ago

0.0.0-snapshot-release-20250403083408

1 year ago

0.0.0-snapshot-release-20250408152752

1 year ago

0.0.0-snapshot-release-20250327145821

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

0.0.0-snapshot-release-20250228081546

1 year ago

0.0.0-snapshot-release-20250605141200

1 year ago

1.2.0

1 year ago

0.0.0-snapshot-release-20250402142019

1 year ago

0.0.0-snapshot-release-20250403105654

1 year ago

0.0.0-snapshot-release-20250328101207

1 year ago

0.0.0-snapshot-release-20250409083634

1 year ago

0.0.0-snapshot-release-20250114092423

1 year ago

0.0.0-snapshot-release-20250207102928

1 year ago

0.0.0-snapshot-release-20250403082233

1 year ago

0.0.0-snapshot-release-20250403114350

1 year ago

1.1.1

1 year ago

0.0.0-snapshot-release-20250327123015

1 year ago

1.1.0

1 year ago

0.0.0-snapshot-release-20250212135726

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-snapshot-release-20250605115142

1 year ago

0.0.0-snapshot-release-20250403123308

1 year ago

0.0.0-snapshot-release-20250408123207

1 year ago

0.0.0-snapshot-release-20250206164440

1 year ago

0.0.0-snapshot-release-20250520075727

1 year ago

0.0.0-snapshot-release-20250318122016

1 year ago

0.0.0-snapshot-release-20250402092308

1 year ago

0.0.0-snapshot-release-20250602115756

1 year ago

0.0.0-snapshot-release-20250325173254

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-snapshot-release-20250514110916

1 year ago

0.0.0-snapshot-release-20250605162115

1 year ago

0.0.0-snapshot-release-20250409103825

1 year ago

0.0.0-snapshot-release-20250325171407

1 year ago

0.0.0-snapshot-release-20250403094112

1 year ago

0.0.0-snapshot-release-20250327135732

1 year ago

0.0.0-snapshot-release-20241028114207

2 years ago

0.49.2

2 years ago

0.0.0-snapshot-release-20241031152540

2 years ago

0.0.0-snapshot-release-20241016144556

2 years ago

0.0.0-snapshot-release-20241010151511

2 years ago

0.0.0-snapshot-release-20241009141239

2 years ago

0.0.0-snapshot-release-20241001132831

2 years ago

0.0.0-snapshot-release-20241009150628

2 years ago

0.0.0-snapshot-release-20240927094312

2 years ago

0.0.0-snapshot-release-20241009152044

2 years ago

0.48.0

2 years ago

0.48.1

2 years ago

0.0.0-snapshot-release-20241010132507

2 years ago

0.49.1

2 years ago

0.49.0

2 years ago

0.0.0-snapshot-release-20241009074625

2 years ago

0.47.1

2 years ago

0.0.0-snapshot-release-20240919135503

2 years ago

0.0.0-snapshot-release-20240829091047

2 years ago

0.0.0-snapshot-release-20240902111409

2 years ago

0.0.0-snapshot-release-20240829134632

2 years ago

0.0.0-snapshot-release-20240829131029

2 years ago

0.0.0-snapshot-release-20240920093107

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-snapshot-release-20240717084624

2 years ago

0.0.0-snapshot-release-20240726144938

2 years ago

0.44.0

2 years ago

0.0.0-snapshot-release-20240812111345

2 years ago

0.0.0-snapshot-release-20240619133108

2 years ago

0.0.0-snapshot-release-20240611105154

2 years ago

0.45.0

2 years ago

0.0.0-snapshot-release-20240716161555

2 years ago

0.0.0-snapshot-release-20240624150655

2 years ago

0.42.8

2 years ago

0.42.6

2 years ago

0.42.7

2 years ago

0.0.0-snapshot-release-20240716155641

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.0.0-snapshot-release-20240522101215

2 years ago

0.0.0-snapshot-release-20240717125155

2 years ago

0.0.0-snapshot-release-20240717101520

2 years ago

0.0.0-snapshot-release-20240724140501

2 years ago

0.0.0-snapshot-release-20240624155507

2 years ago

0.0.0-snapshot-release-20240709100447

2 years ago

0.0.0-snapshot-release-20240717133906

2 years ago

0.0.0-snapshot-release-20240815110558

2 years ago

0.0.0-snapshot-release-20240531152027

2 years ago

0.0.0-snapshot-release-20240726134925

2 years ago

0.46.0

2 years ago

0.0.0-snapshot-release-20240717104413

2 years ago

0.0.0-snapshot-release-20240516103922

2 years ago

0.0.0-snapshot-release-20240516144918

2 years ago

0.42.5

2 years ago

0.0.0-snapshot-release-20240501131344

2 years ago

0.42.4

2 years ago

0.0.0-snapshot-release-20240425154059

2 years ago

0.0.0-snapshot-release-20240425145900

2 years ago

0.0.0-snapshot-release-20240425150343

2 years ago

0.0.0-snapshot-release-20240425111327

2 years ago

0.0.0-snapshot-release-20240426153518

2 years ago

0.0.0-snapshot-release-20240425144948

2 years ago

0.0.0-snapshot-release-20240425151248

2 years ago

0.0.0-snapshot-release-20240425111612

2 years ago

0.0.0-snapshot-release-20240425113900

2 years ago

0.0.0-snapshot-release-20240425155459

2 years ago

0.0.0-snapshot-release-20240425152601

2 years ago

0.0.0-snapshot-release-20240424153236

2 years ago

0.0.0-snapshot-release-20240424140720

2 years ago

0.0.0-snapshot-release-20240424152323

2 years ago

0.0.0-snapshot-release-20240424154902

2 years ago

0.0.0-snapshot-release-20240424112145

2 years ago

0.0.0-snapshot-release-20240424143240

2 years ago

0.0.0-snapshot-release-20240424101641

2 years ago

0.0.0-snapshot-release-20240424154132

2 years ago

0.0.0-snapshot-release-20240424134804

2 years ago

0.0.0-snapshot-release-20240424151451

2 years ago

0.0.0-snapshot-release-20240424142055

2 years ago

0.0.0-snapshot-release-20240424144352

2 years ago

0.0.0-snapshot-release-20240423133259

2 years ago

0.0.0-snapshot-release-20240423145420

2 years ago

0.0.0-snapshot-release-20240423162431

2 years ago

0.0.0-snapshot-release-20240423160825

2 years ago

0.0.0-snapshot-release-20240417103650

2 years ago

0.0.0-snapshot-release-20240417102327

2 years ago

0.0.0-snapshot-release-20240417133510

2 years ago

0.0.0-snapshot-release-20240417125115

2 years ago

0.0.0-snapshot-release-20240417102125

2 years ago

0.0.0-snapshot-release-20240417100755

2 years ago

0.0.0-snapshot-release-20240416104910

2 years ago

0.0.0-snapshot-release-20240416150202

2 years ago

0.0.0-snapshot-release-20240416102517

2 years ago

0.0.0-snapshot-release-20240416151956

2 years ago

0.0.0-snapshot-release-20240416131641

2 years ago

0.0.0-snapshot-release-20240416141940

2 years ago

0.0.0-snapshot-release-20240416151219

2 years ago

0.42.3

2 years ago

0.0.0-snapshot-release-20240416141525

2 years ago

0.0.0-snapshot-release-20240416153654

2 years ago

0.0.0-snapshot-release-20240416135813

2 years ago

0.0.0-snapshot-release-20240412134443

2 years ago

0.42.2

2 years ago

0.0.0-snapshot-release-20240412121709

2 years ago

0.0.0-snapshot-release-20240411081540

2 years ago

0.0.0-snapshot-release-20240409162316

2 years ago

0.42.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.0.0-snapshot-release-20240402113918

2 years ago

0.0.0-snapshot-release-20240328145717

2 years ago

0.0.0-snapshot-release-20240328150607

2 years ago

0.0.0-snapshot-release-20240328154814

2 years ago

0.0.0-snapshot-release-20240328155206

2 years ago

0.42.0

2 years ago

0.42.0-alpha.0

2 years ago

0.0.0-snapshot-release-20240321151406

2 years ago

0.0.0-snapshot-release-20240321141351

2 years ago

0.41.0

2 years ago

0.40.0

2 years ago

0.39.0

2 years ago

0.0.0-snapshot-release-20240229155253

2 years ago

0.38.8

2 years ago

0.0.0-snapshot-release-20240229152723

2 years ago

0.38.7

2 years ago

0.38.6

2 years ago

0.0.0-snapshot-release-20240209112948

2 years ago

0.0.0-snapshot-release-20240209144253

2 years ago

0.38.5

2 years ago

0.38.4

2 years ago

0.0.0-snapshot-release-20240130130519

2 years ago

0.0.0-snapshot-release-20240129145024

2 years ago

0.0.0-snapshot-release-20240130122336

2 years ago

0.0.0-snapshot-release-20240129160421

2 years ago

0.0.0-snapshot-release-20240129153327

2 years ago

0.0.0-snapshot-release-20240125120047

2 years ago

0.0.0-snapshot-release-20240125105736

2 years ago

0.0.0-snapshot-release-20240125091403

2 years ago

0.0.0-snapshot-release-20240125103637

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

2 years ago

0.0.0-snapshot-release-20240124172329

2 years ago

0.38.3

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

2 years ago

0.38.1

2 years ago

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

2 years ago

0.36.2

2 years ago

0.0.0-snapshot-release-20240105125445

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

2 years ago

0.36.1

2 years ago

0.0.0-snapshot-release-20240104121750

2 years ago

0.0.0-snapshot-release-20240104162246

2 years ago

0.0.0-snapshot-release-20240104130154

2 years ago

0.0.0-snapshot-release-20240104120200

2 years ago

0.36.0

2 years ago

0.0.0-snapshot-release-20240102161022

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

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

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

3 years ago

0.0.0-snapshot-release-20231214081533

3 years ago

0.0.0-snapshot-release-20231213151043

3 years ago

0.0.0-snapshot-release-20231213161105

3 years ago

0.0.0-snapshot-release-20231212141542

3 years ago

0.35.5

3 years ago

0.35.4

3 years ago

0.0.0-snapshot-release-20231130164403

3 years ago

0.0.0-snapshot-release-20231201131015

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.0.0-snapshot-release-20231129145325

3 years ago

0.32.0

3 years ago

0.30.0

3 years ago

0.0.0-snapshot-release-20231130144625

3 years ago

0.0.0-snapshot-release-20231123130133

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.0.0-snapshot-release-20231123135758

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.0.0-snapshot-release-20231201144021

3 years ago

0.0.0-snapshot-release-20231201125240

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.0.0-snapshot-release-20231130151848

3 years ago

0.28.0

3 years ago

0.0.0-snapshot-release-20231123112917

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

@justeattakeaway/pie-modal v1.7.6