Component documentation


This page documents the Dialog component.


Please choose the dialog size that is appropriate for the form or content it contains. Available sizes are large, medium, small and fullscreen.

Implementation tips

These dialogs are implemented with dialogs.js. This is a vanilla JS script intended to serve as an example for a real implementation.

For a full-page example. see here.

When implementing dialogs, please make sure the dialog code is one of the last elements of the page, right before the end of the <body> tag.

Triggering dialogs

You can trigger a dialog on any element. To do so add the data-dialog attribute and specify the id of the target dialog context. You can write the dialog context mark-up anywhere in your DOM structure, the JS will automatically move it to the document root.

Dialog closing

You can add the data-dialog-close attribute to any child of the dialog. Clicking it will close the dialog. Clicking outside of a dialog window or pressing the esc key will also close the active modal.

Also see: AlertDialog.

Dialog footerless


Dialog type (add)


Adding something simple, with a few form fields.

Dialog type (edit)


Editing something simple, with a few form fields.

Dialog medium


Dialog small


Dialog full screen


Dialog large